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 ，我就把这两种都加上，一一测试，不管用什么方法改动代码，下载的excel 都是乱码。

最后在 vue axios 请求二进制流excel文件，response乱码  这片文章中，看网友的最后一个评论，才意识到可能是 mockjs 引起的，mock 把请求返回结果类型给修改了。这个问题在之前的文章中（https://www.cnblogs.com/zyt-it/p/12206887.html） 看到过，只是没有在意。

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

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

 

 

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

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

总结：

　　1、最重要的是代码中要设置 responseType 的值，无论设置 blob 或者 arraybuffer 都可以。

　　2、设置 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 怎么写已经无所谓了。

　　3、划重点了！！！！如果依照上面的写法，下载的 excel 依然是乱码，就要看 vue 项目中是否引入了 mockjs，取消掉即可，取消 mock 模式之后，excel 文件打开就不会是乱码了。