Install the file-saver plugin:
npm i file-saver
The project uses elementPlus to animate file downloads.
import { ElLoading } from 'element-plus' // 引入加载动画效果
import axios from 'axios';
let downloadLoadingInstance;
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项,表示请求URL公共部分
baseURL: import.meta.env.VITE_APP_BASE_API,
// 超时
timeout: 10000,
});
// 严重是否为Blob数据
const isBlobData = async (data)=> {
try {
const text = await data.text();
JSON.parse(text);
return false;
} catch (error) {
return true;
}
}
export function download(url, params, filename) {
downloadLoadingInstance = ElLoading.service({ text: '正在下载数据,请稍候', background: 'rgba(0, 0, 0, 0.7)' });
return service
.post(url, params, {
transformRequest: [(params) => encodeURIParams(params)],
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
responseType: 'blob',
})
.then(async (data) => {
const isLogin = await isBlobData(data);
if (isLogin) { // 如果是Blob数据
const blob = new Blob([data]);
saveAs(blob, filename);// 调用方法下载
} else {
const resText = await data.text();
const rspObj = JSON.parse(resText);
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode.default;
ElMessage.error(errMsg);
}
downloadLoadingInstance.close();
})
.catch((r) => {
console.error(r);
ElMessage.error('下载文件出现错误,请联系管理员!');
downloadLoadingInstance.close();
});
}