前端接收后端文件流导出excel文档遇到的问题
先上代码:
Vue.prototype.download = function(oUrl, filename) {
this.axios
.get(oUrl, { responseType: 'arraybuffer' })
.then((res) => {
console.log(res);
// type 为需要导出的文件类型,此处为xls表格类型
const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
// 兼容不同浏览器的URL对象
const url = window.URL || window.webkitURL;
// 创建下载链接
const downloadHref = url.createObjectURL(blob);
// 创建a标签并为其添加属性
let downloadLink = document.createElement('a');
downloadLink.target = '_blank';
downloadLink.href = downloadHref;
filename = filename ? filename : new Date().getTime();
downloadLink.download = filename + '.xls';
// 触发点击事件执行下载
downloadLink.click();
})
.catch((err) => {
console.error(err);
});
// window.open(location.origin + axios.defaults.baseURL + oUrl); //直接跳转文件地址下载,有些页面无法正常下载,暂未解决,待排查。
};
请求一定要设置
responseType: 'arraybuffer'
createObjectURL(blob)中的地址一定要是Blob对象:
const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });