vue 导出Excel乱码问题解决方案

我的群153181864 前端交流群，绝对原创，转载请附上本微博链接。打赏下哦~

vue交流1群:153181864 前端交流群（满）
vue交流2群:869745456 前端交流2群

博主用的是 vue element框架，流程描述下

1、前端用vue +axios 请求后端数据

2、请求的数据在前端打包成Excel文件，

3、弹出下载 .xls的弹窗

很奇怪的是后端swagger-ui.html导出来的Excel 还是正常的，前端导出的就不行！

最后导出的.xls的文件尽然是乱码如图

如果你出现的问题和我一样，你在继续往下看

1、首先，异步后台数据是这样的（你先别管后端blob到底是application/vnd.ms-excel 还是application/octet-stream那个跟你前端关系不大）

来，你能请求到这样一串返回代码证明后端接口没问题

2、先在axios公共.js文件里请求里面加一个配置 axiosOption.responseType= 'blob' 这里要，来注意，你仔细看我axiosOption.responseType= 'blob' 是加在method，url,data,同级的同级!!!!!!! 注意不是在 header里面（看到这里是不是要加个粉丝团、或加个QQ群亲、专业填坑10年）

var axiosOption={
      method:type,
      url: baseUrl + url,
      data: data,
      timeout: 0,
      headers: {'Content-Type': head}
  }
  if(data.responseType=='blob'){
      axiosOption.responseType= 'blob'
  }

  axios(axiosOption).then(

其实加上去这个就解决了，很多博主说的都是加responseType= 'blob' 没说加在哪个位置啊所以试了一个晚上，坑

3、来接下贴上生成Excel的代码其实百度的到，为了省的你百度，博主也顺便贴出来吧

blobDownload(data,name){
  	let m=this;
    //如果能用，打赏下呗 博主猜坑不容易 头发都白了很多
    name=name||"csdn搜xuelang532777032"
  	var content = data;
  	// var data = new Blob([content],{type:"application/octet-stream;charset=utf-8"});
  	var data = new Blob([content],{type:"application/vnd.ms-excel;charset=utf-8"});
  	var downloadUrl = window.URL.createObjectURL(data);
  	var anchor = document.createElement("a");
  	anchor.href = downloadUrl;
  	anchor.download = name+".xls";
  	anchor.click();
  	window.URL.revokeObjectURL(data);
  }

data是 axios请求后端返回的那个数据流注意！！

我的群153181864 前端交流群，绝对原创，转载请附上本微博链接。打赏下哦~

vue交流1群:153181864 前端交流群（满）
vue交流2群:869745456 前端交流2群

vue 导出Excel乱码问题解决方案

猜你喜欢