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企服之家，中国第一个企服评测及商务社交产业平台。