前言：前端导出excel，之前一直是后端返回文件一个链接（直接下载）。这次excel导出采用后端返回二进制流，前端接收后通过blob去下载，但是会出现乱码的情况，网上找资料说需要设置responseType，然而设置了也没用，这里记录下我最后实现的方式
遇到的问题
返回的结果截图.png
chrome 调试preview截图.png
- 原来的代码（就算设置了responseType，excel还是乱码）
axios.post('url',
{params:data},
{responseType: 'blob'}
).then(function (response) {
debugger;
const content = response;
const blob = new Blob([content], {type: 'application/ms-excel'});
const fileName = '表格.xls';
if ('download' in document.createElement('a')) { // 非IE下载
const link = document.createElement('a');
link.download = fileName;
elink.style.display = 'none';
link.href = URL.createObjectURL(blob);
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(link.href); // 释放URL 对象
document.body.removeChild(link);
} else { // IE10+下载
navigator.msSaveBlob(blob, fileName);
}
})
.catch(function (error) {
console.log(error);
});
解决方法
- 反复修改以上代码，还是无法正常下载后，我放弃了axios，利用隐藏表单解决
export function exportForm (data) {
let form = document.createElement('form'); //创建form标签
form.setAttribute("style","display:none");
form.setAttribute("method","post");//设置请求方式
let exportData = '' //设置发送后台数据
for (let key in data) {
if (data[key]) {
exportData += key + '=' + data[key] + '&'
}
}
form.setAttribute("action",publicHost+"url?"+exportData); //action属性设置请求路径
document.body.append(form); //页面添加form标签
let input1 = document.createElement("input") //创建input标签
input1.setAttribute("type","hidden") //设置隐藏域
form.append(input1);
form.submit();//表单提交即可下载！
document.body.removeChild(form); //页面删除form标签
}
总结
- 在上述方法成功之后，我试过在axios设置
{headers: {'Content-Type': 'application/x-www-form-urlencoded'}}，然而并没有用，下载的excel还是乱码。。。心塞塞
如果有小伙伴遇到类似情况的，希望可以分享下～～～
