需求:如题,按一个按钮导出文件。
遇到的坑:1:window.open()打开链接请求接口下载下来,但是需要把请求头写在header上,我百度好久也没看到相关的技术。
解决方法:用new Blob接收后端的文件流,再开个隐藏的链接自动下载
一:封装一个统一处理导出文件的处理方法,download属性可以随便改文件名
//封的方法
export function download(data, name = "excel表.xlsx") {
if (!data) {
return;
}
let url = window.URL.createObjectURL(new Blob([data]));
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', name);
document.body.appendChild(link);
link.click();
}
二:照常调接口,通过axios配请求头
注意:要声明一下数据类型,responseType: 'blob’
// 照常调接口
export const memberTypeExcel= (params) => {
return request({
url: '/memberTypeExcel/excel',
method: 'get',
params,
responseType: 'blob',
})
}
三:页面可以直接用了,完美解决
import { download } from "@/util/export";
handleExcel() {
memberTypeExcel(this.excel).then(res => {
download(res.data, "考勤报表");
});
},
思考:文件名后台已经写好了,能不能我不取名,文件自己用后台的名字?
尝试:给new Blob指定类型,再把download属性置空(不提前指定就会默认是txt),但是文件名是随机数,失败
fe3e2df2-3b33-43b2-8452-3a62aaac43ae.xls
export function download(data) {
if (!data) {
return;
}
let url = window.URL.createObjectURL(new Blob([data], { type: "application/vnd.ms-excel" }));
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', '');
document.body.appendChild(link);
link.click();
}
还是直接拿后台的数据给他赋个名字吧
后台返的数据
handleExcel() {
memberTypeExcel(this.excel).then(res => {
// encodeURI('XXX')--把非英文字符转化为英文编码
// decodeURI('XXX')--把转化后的英文编码转化回来
let excelName = decodeURI(
res.headers["content-disposition"].split("=")[1]
);
download(res.data, excelName);
});
},
解决。