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群