当前位置：首页 > news >正文

vue zip文件下载请求封装与使用

news 2025/8/16 9:06:23

axios封装（重点是响应拦截）
这里把响应超时时间注释是文件下载接口返回需要较长时间

import axios from 'axios'
import {ElMessageBox} from "element-plus";
import router from "@/router";const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,// timeout: 10000
})
// console.log(process.env.VUE_APP_BASE_API)
// 请求拦截器
service.interceptors.request.use(config => {// 添加请求头等前置处理config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token')return config},error => {// 请求错误处理console.log('Request Error:', error)// return Promise.reject(error)}
)// 响应拦截器
service.interceptors.response.use(response => {// 响应后处理// 二进制数据则直接返回if (response.request.responseType === 'blob') {return response.data}if (response.status === 200 && response.data.code === 200) {return Promise.resolve(response.data)} else {if(response.data.code === 401){localStorage.removeItem('token')ElMessageBox.alert("登录状态已过期，请重新登录", '提示', {confirmButtonText: '去登录',callback: () => {router.replace("/login").then(r => {})}}).then(r =>{})}// return Promise.reject(response.data)}},error => {console.log('Response Error:', error)// return Promise.reject(error)}
)export default service

接口：

export function getZip(params){return request({url:"/exportZip",method:"get",params:params,responseType:"blob"})
}

页面：
Excel的话把type改成 { type: ‘application/vnd.ms-excel’ }

function exportEvaluation(){if(evaluationId.value!==null){const  loading = ElLoading.service({lock: true,text: '报告导出中...',background: 'rgba(0, 0, 0, 0.7)',})getEvaluationZip({id:evaluationId.value}).then(res=>{console.log(res)if(res){let filename = year.value+'评价报告导出'const blob = new Blob([res],{  type: 'application/zip' })let objectUrl = URL.createObjectURL(blob) // 创建URLlet link = document.createElement("a");link.href = objectUrllink.download =filename // 自定义文件名link.click() // 下载文件URL.revokeObjectURL(objectUrl); // 释放内存loading.close()}})}
}