vue zip文件下载请求封装与使用
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){
constloading = 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(,{type: 'application/zip' })
let objectUrl = URL.createObjectURL(blob) // 创建URL
let link = document.createElement("a");
link.href = objectUrl
link.download =filename // 自定义文件名
link.click() // 下载文件
URL.revokeObjectURL(objectUrl); // 释放内存
loading.close()
}
})
}
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]