ToB企服应用市场:ToB评测及商务社交产业平台

标题: vue zip文件下载请求封装与使用 [打印本页]
作者: 羊蹓狼    时间: 2024-7-30 01:48
标题: vue zip文件下载请求封装与使用
axios封装（重点是响应拦截）
这里把响应超时时间解释是文件下载接口返回须要较长时间
  1. import axios from 'axios'
  2. import {ElMessageBox} from "element-plus";
  3. import router from "@/router";
  5. const service = axios.create({
  6.     baseURL: process.env.VUE_APP_BASE_API,
  7.     // timeout: 10000
  8. })
  9. // console.log(process.env.VUE_APP_BASE_API)
  10. // 请求拦截器
  11. service.interceptors.request.use(
  12.     config => {
  13.         // 添加请求头等前置处理
  14.         config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token')
  16.         return config
  17.     },
  18.     error => {
  19.         // 请求错误处理
  20.         console.log('Request Error:', error)
  21.         // return Promise.reject(error)
  22.     }
  23. )
  25. // 响应拦截器
  26. service.interceptors.response.use(
  27.     response => {
  28.         // 响应后处理
  29.         // 二进制数据则直接返回
  30.         if (response.request.responseType === 'blob') {
  31.             return response.data
  32.         }
  33.         if (response.status === 200 && response.data.code === 200) {
  34.             return Promise.resolve(response.data)
  35.         } else {
  36.             if(response.data.code === 401){
  37.                 localStorage.removeItem('token')
  38.                 ElMessageBox.alert("登录状态已过期，请重新登录", '提示', {
  39.                     confirmButtonText: '去登录',
  40.                     callback: () => {
  41.                         router.replace("/login").then(r => {})
  42.                      }
  43.                 }).then(r =>{})
  44.             }
  45.             // return Promise.reject(response.data)
  46.         }
  47.     },
  48.     error => {
  49.         console.log('Response Error:', error)
  50.         // return Promise.reject(error)
  51.     }
  52. )
  54. export default service
复制代码
接口：
  1. export function getZip(params){
  2.     return request({
  3.         url:"/exportZip",
  4.         method:"get",
  5.         params:params,
  6.         responseType:"blob"
  7.     })
  8. }
复制代码
页面：
Excel的话把type改成 { type: ‘application/vnd.ms-excel’ }
  1. function exportEvaluation(){
  2.   if(evaluationId.value!==null){
  3.     const  loading = ElLoading.service({
  4.       lock: true,
  5.       text: '报告导出中...',
  6.       background: 'rgba(0, 0, 0, 0.7)',
  7.     })
  8.     getEvaluationZip({id:evaluationId.value}).then(res=>{
  9.       console.log(res)
  10.       if(res){
  11.         let filename = year.value+'评价报告导出'
  12.         const blob = new Blob([res],{  type: 'application/zip' })
  13.         let objectUrl = URL.createObjectURL(blob) // 创建URL
  14.         let link = document.createElement("a");
  15.         link.href = objectUrl
  16.         link.download =filename // 自定义文件名
  17.         link.click() // 下载文件
  18.         URL.revokeObjectURL(objectUrl); // 释放内存
  19.         loading.close()
  20.       }
  21.     })
  22.   }
  23. }
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4