项目场景:
解决vue2.x导出excel乱码的问题~~~~~
采用的UI框架的vuetify—,vue版本是2.x,导出excel是后端返回blob流,前端通过a标签下载
问题描述
注释mock,requestType: blob, 文件类型都试过了,反正下载下来乱码,后端测试下载是完全Ok的。
下面说下解决办法,这个办法是和后端协商解决的,具体咋处理,就不知道了,发表此文章的目的在于记录奇怪bug, 加了个请求头Download-Request
//这个是请求
axios()
.post(url, data, {
headers: {
'Content-Type': 'application/json;charset=UTF-8',
'Download-Request': 'Download-Request', //多加的请求头
},
timeout: 60000,
responseType: 'blob',
})
//具体下载方法
exportEntity(url, params)
.then((res) => {
// 将文件流转成blob形式
const blob = new Blob([res.data], {
type: 'application/octet-stream;charset=utf-8',
});
// const blob = res.data;
let filename = fileName + '.xls';
// 创建一个超链接,将文件流赋进去,然后实现这个超链接的单击事件
const elink = document.createElement('a');
elink.download = filename;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
})