vue项目中用axios通过post请求下载的excel文件，以及下载的excel文件打开为乱码的解决办法

vue项目中用axios通过post请求-的excel文件，以及-的excel文件打开为乱码的解决办法

第一次碰到-文件用 post 的方法，之前都是用 get 方法，直接-一个存在在服务器根目录下的文件。但是有时候碰到参数的数据量比较大的时候， get 方法就不合适了。这次后端定义的是 post 方法，返回给前端的是一个文件流。

get 方法这里不赘述，基本思路就是动态创建一个a标签，设置a标签的 href 属性为接口地址，动态传参，-即可。

post 方法请求-文件

直接上代码：

methods:{ //导出模板 exportTem(){ //最初的方法 let url="/pmkpi/v1/restapi/file/download"; //后端的接口 let param = this.downloadPam; //我自己项目中的请求参数 axios.post(url,param,{ // responseType: 'arraybuffer' 'responseType':'blob' } ).then(res=>{ console.log('res=>',res); if(res.status==200){ this.exportFile(res) }else{ this.$message({ message: '服务器错误', type: 'error', duration:2000 }); } }) }, exportFile(result){ let contentDisposition = result.headers['content-disposition']; // 这里后端给的内容中，文件名字可能是驼峰式名称的 fileName ，或者是全部小写的 filename let filename = decodeURI(contentDisposition.split('fileName=')[1] || contentDisposition.split('filename=')[1]); // 注意这里的 result.data ，如果只传 result 的话，最后-出来的excel文件，里面显示的是 [object Object] let blob = new Blob([result.data],{type: result.headers['content-type']}); // let blob = new Blob([result.data],{type: "application/x-msdownload;charset=GBK"}); // let blob = new Blob([result.data],{type: "application/x-msdownload"}); // let blob = new Blob([result.data]); // let blob = new Blob([result.data],{type: "application/vnd.ms-excel"}); let url = window.URL.createObjectURL(blob); if (window.navigator.msSaveBlob) { //IE try { window.navigator.msSaveBlob(blob, filename); } catch (e) { console.log(e); } } else { //非IE let link = document.createElement('a'); link.style.display = 'none'; link.href = url; link.setAttribute('download', filename); document.body.appendChild(link); link.click(); } URL.revokeObjectURL(url); // 释放内存 }}

个人注解：

1、代码写法都是自己上网搜的，参考了很多文章，基本都是这样的编码思路。

2、post 方法请求错误的处理方法，是我自己随便写的，如果想对错误处理更详细的话可以参照另一篇文章：​​axios+post-文件，以及接口报错处理​​

踩坑

代码写完之后，excel 文件也-下来了，但是打开 excel 文件，显示的是乱码，如下图：

自己采用 postman 测试，-下来的文件是正常的：

postman-的文件显示是正常的，如下图：

排查原因

post 请求成功之后，后端返回的结果为文件流，如下图：

在代码中把请求结果通过 console.log() 打印出来查看，结果如图：

上网搜了很多文章，几乎都是说要设置 responseType 值为 blob ，也有设置为 arraybuffer

也有在  let blob = new Blob([result.data],{type: result.headers['content-type']}) 中加 type ，我看网上很多 type 值为  application/vnd.ms-excel ，但是这一次后端返回的是 application/x-msdownload

最后在 ​​vue axios 请求二进制流excel文件，response乱码​​​  这片文章中，看网友的最后一个评论，才意识到可能是 mockjs 引起的，mock 把请求返回结果类型给修改了。这个问题在之前的文章中 看到过，只是没有在意。

最后把项目中的 mock 模式关闭，一般在 main.js 文件中引入的有 mock，找到引入的代码，注释掉即可。

再次请求，看后端返回的结果：

mock 模式关闭后，后端返回的结果类型为 XMLHttpRequest ，之前没有关闭 mock 模式的时候，后端返回的结果类型被改为了 MockXMLHttpRequest

此时-的 excel 打开已经不是乱码了。

总结：

responseType 的值，无论设置 blob 或者 arraybuffer

responseType 后，代码 new Blob([result.data]) 中是否设置 type

new Blob([result.data],{type: result.headers['content-type']})

new Blob([result.data],{type: "application/x-msdownload;charset=GBK"})

new Blob([result.data],{type: "application/x-msdownload"})

new Blob([result.data],{"application/vnd.ms-excel"})

总之：只要加了 responseType ，这里的 type 怎么写已经无所谓了。

划重点了！！！！如果依照上面的写法，-的 excel 依然是乱码，就要看 vue 项目中是否引入了 mockjs，取消掉即可，取消 mock

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。