我的 群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 前端交流群 ,绝对原创,转载请附上 本微博链接。打赏下哦~