问了不影响原先的axios封装 及拦截 重新定义了一套新的专用于文件流的导出方法 并兼容ie10以上
excelFileDown.js
/*
* @Author: your name
* @Date: 2021-11-24 15:58:37
* @LastEditTime: 2022-02-08 18:50:57
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \transaction_share\src\request\excelFileDown.js
*/
//axios封装 脱离原axios方法
import axios from 'axios'
import qs from 'qs'
export function excelFile(url, params, excelName, useForm = true) {
var instance = axios.create({
method: "post",
baseURL: process.env.VUE_APP_BASE_URL,
timeout: 50000,
responseType: 'blob',
})
// 设置请求拦截
instance.interceptors.request.use(config => {
// config.headers.Authorization = 'Bearer' + 'asd13as1d321as32d'
// config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
// 每次发送请求前判断是否存在token,如果存在,则同意再http请求的header都加上token
// 即使在本地存在token,也有可能token已失效,所以在响应拦截器
// const token = store.state.token
const token = sessionStorage.getItem('token')
token && (config.headers.Authorization = token)
return config
},
error => {
return Promise.reject(error)
})
// 响应拦截器
instance.interceptors.response.use(
response => {
console.log('response1',response)
if (response.headers['content-type'] == "application/vnd.ms-excel;charset=utf8"||response.headers['content-type'] == "application/vnd.ms-excel;charset=utf-8") {
return Promise.resolve(response)
}else if (response.data.code == '100008'||response.data.code == '030001'||response.data.code == '030002') {
Message({
type: "warning",
message: response.data.msg
});
setTimeout(() => {
sessionStorage.clear();
removeCookie('userInfo')
window.location.href = `${window.location.origin}/login`
// sessionStorage.clear();
// router.replace({
// path: `${window.location.origin}/login` // 到登录页重新获取token
// }).catch(err => {
// });
}, 1000);
} else {
Message({
type: "warning",
message: response.data.msg
});
}
},
error => {
console.log('error', error)
}
)
return new Promise((resolve, reject) => {
instance.post(url, useForm ? qs.stringify(params) : params, { headers: { 'Content-Type': useForm ? 'application/x-www-form-urlencoded' : 'application/json;charset=UTF-8' } }).then(res => {
// resolve(res.data)
if (res) {
if (window.navigator.msSaveBlob) {
// for ie 10 and later
console.log(res)
try {
var blobObject = new Blob([res.data]);
window.navigator.msSaveBlob(blobObject, `${excelName}.xlsx`);
} catch (e) {
console.log(e);
}
} else {
let blob = new Blob([res.data], {
type: "application/vnd.ms-excel;charset=utf-8"
}); // res就是接口返回的文件流了
let objectUrl = URL.createObjectURL(blob);
// console.log(objectUrl);
// const fileName = FileName;
const elink = document.createElement("a");
elink.download = `${excelName}.xlsx`; //下载文件名称,
elink.style.display = "none";
elink.href = objectUrl;
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
}
}
}).catch(err => {
reject(err.data)
})
})
}
api调用
import { excelFile } from './excelFileDown'
//params 入参 excelName 导出文件名
export const performanceExportExcelById = (params, excelName) => excelFile(`${portalServer}/performance/exportExcelById`, params, excelName)
vue页面调用
import {
performanceExportExcelById,
} from "@/request/api";
performanceExportExcelById({ id:this.id}, '导出文件名');