解决vue使用axios post 方法导出excel乱码问题

最新推荐文章于 2023-05-26 10:43:41 发布

Djj_Alice

最新推荐文章于 2023-05-26 10:43:41 发布

阅读量1.7k

点赞数

分类专栏： vue 项目踩坑

本文链接：https://blog.youkuaiyun.com/Djj_Alice/article/details/96151318

版权

vue 同时被 2 个专栏收录

6 篇文章

订阅专栏

项目踩坑

1 篇文章

订阅专栏

1.使用axios中的post传递参数，后台导出excel数据。api接口调用如下：

2.后台设置response的content-type为：content-type:application/octet-stream;charset:utf-8

3.下载文件。根据第一步的设置请求后的格式如下：

下载的方法如下：

let config = {
headers: {
"Content-Type": "multipart/form-data"
},
'responseType':'blob'
}
axios.post('api',params,config).then((res)=>{
let blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
const fileName = `模板文件${Date.parse(new Date())}.xlsx`;
if ('download' in document.createElement('a')) { // 非IE下载
    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);
} else { // IE10+下载
    navigator.msSaveBlob(blob, fileName);
}

下载的文件打开是乱码，后来发现必须给config添加responseType为blob的属性，添加'responseType':'blob'之后完美解决乱码问题。