前端文件下载有三种,一种是get
请求拼接下载地址,a
标签直接点击下载;一种是接口返回文件流,然后create
一个a
标签,模拟点击下载;一种是使用form
表单post
请求进行下载
//1.直接使用get请求方式进行下载
window.open(`${url}?${qs.stringify(param)}`, '_blank');
//2.axios(ajax)前端根据返回数据流生成文件下载
axios.post(url, param, {
responseType: 'blob'
}).then((res) => {
const blob = res.data;
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = (e) => {
const a = document.createElement('a');
a.download = `文件名称.xlsx`;
a.href = e.target.result;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
}).catch((err) => {
console.log(err.message);
});
//3.使用form 表单post请求进行下载
const postDownloadFile = (action, param) => {
const form = document.createElement('form');
form.action = action;
form.method = 'post';
form.target = 'blank';
Object.keys(param).forEach((item) => {
const input = document.createElement('input');
input.type = 'hidden';
input.name = item;
input.value = param[item];
form.appendChild(input);
});
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
}
postDownloadFile(url, param);
如果文件流过大,下载过程耗时长,使用axios.post请求时,会出现卡机情况,最好是再新增一个get接口,axios.post的返回值去请求新增的get接口下载