Vue前端下载Excel文件乱码汇总

问题出现原因：

使用为Vue axios前端请求下载 后端EasyExcel进行文件下载

1. PostMan进行后端接口访问正常下载，并可以打开文件，内容完整清晰。

2. 进行路径直接访问也能完整下载

3.利用Vue前端下载，不仅文件下载不下来而且还是乱码

查找结果：

1. 大部分为没有在前端请求下载时没有加 respOnseType= "blob" ,可是自己加了半天还是一样。看后端的下载格式 ，也没发现啥问题

2. 继续查找原因，还有一种情况是前端Vue框架引用了Mock模块导致 请求类型失效。一顿查找压根没用到mock，无果。

3.第三种原因是我的根本原因，因为使用了axios进行请求接口，在进行封装的axios的时候，会导致axios请求下载接口导致responseType失效，果断换为：成功下载

axios({ // 用axios发送get请求method: &＃39;get&＃39;,url: &＃39;http://localhost:8202/admin/cmn/dict/export-dict&＃39;, // 请求地址responseType: &＃39;blob&＃39;, // 表明返回服务器返回的数据类型headers: {&＃39;Content-Type&＃39;: &＃39;application/json&＃39;}}).then(res => { // 处理返回的文件流//new Blob([res])中不加data就会返回下图中[objece objece]内容（少取一层）const blob = new Blob([res.data],{type: "application/vnd.ms-excel"}); const fileName = &＃39;字典数据.xlsx&＃39;;//下载文件名称const elink = document.createElement(&＃39;a&＃39;);elink.download = fileName;elink.style.display = &＃39;none&＃39;;elink.href = URL.createObjectURL(blob);document.body.appendChild(elink);elink.click();URL.revokeObjectURL(elink.href); // 释放URL 对象document.body.removeChild(elink);})axios({ // 用axios发送post请求method: &＃39;get&＃39;,url: &＃39;http://localhost:8202/admin/cmn/dict/export-dict&＃39;, // 请求地址data: form,responseType: &＃39;blob&＃39;, // 表明返回服务器返回的数据类型headers: {&＃39;Content-Type&＃39;: &＃39;application/json&＃39;}}).then(res => { // 处理返回的文件流//new Blob([res])中不加data就会返回下图中[objece objece]内容（少取一层）const blob = new Blob([res.data],{type: "application/vnd.ms-excel"}); const fileName = &＃39;字典数据.xlsx&＃39;;//下载文件名称const elink = document.createElement(&＃39;a&＃39;);elink.download = fileName;elink.style.display = &＃39;none&＃39;;elink.href = URL.createObjectURL(blob);document.body.appendChild(elink);elink.click();URL.revokeObjectURL(elink.href); // 释放URL 对象document.body.removeChild(elink);})

感悟：一个小细节耽误自己了好久时间，所以在学编程的路上一定要弄明白原理 不然很容易绊脚。加油打工人！！！