Vue前端下载Excel文件乱码汇总
问题出现原因:使用为Vue axios前端请求下载 后端EasyExcel进行文件下载1. PostMan进行后端接口访问正常下载,并可以打开文件,内容完整清晰。2. 进行路径直接访问也能完整下载3.利用Vue前端下载,不仅文件下载不下来而且还是乱码查找结果:1. 大部分为没有在前端请求下载时没有加 responseType = "blob" ,可是自己加了半天还是一样。看后端的下载格式 ,也没发
·
问题出现原因:
使用为Vue axios前端请求下载 后端EasyExcel进行文件下载
1. PostMan进行后端接口访问正常下载,并可以打开文件,内容完整清晰。
2. 进行路径直接访问也能完整下载
3.利用Vue前端下载,不仅文件下载不下来而且还是乱码
查找结果:
1. 大部分为没有在前端请求下载时没有加 responseType = "blob" ,可是自己加了半天还是一样。看后端的下载格式 ,也没发现啥问题
2. 继续查找原因,还有一种情况是前端Vue框架引用了Mock模块导致 请求类型失效。一顿查找压根没用到mock,无果。
3.第三种原因是我的根本原因,因为使用了axios进行请求接口,在进行封装的axios的时候,会导致axios请求下载接口导致responseType失效,果断换为:成功下载
axios({ // 用axios发送get请求
method: 'get',
url: 'http://localhost:8202/admin/cmn/dict/export-dict', // 请求地址
responseType: 'blob', // 表明返回服务器返回的数据类型
headers: {
'Content-Type': 'application/json'
}
}).then(res => { // 处理返回的文件流
//new Blob([res])中不加data就会返回下图中[objece objece]内容(少取一层)
const blob = new Blob([res.data],{type: "application/vnd.ms-excel"});
const fileName = '字典数据.xlsx';//下载文件名称
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
})
axios({ // 用axios发送post请求
method: 'get',
url: 'http://localhost:8202/admin/cmn/dict/export-dict', // 请求地址
data: form,
responseType: 'blob', // 表明返回服务器返回的数据类型
headers: {
'Content-Type': 'application/json'
}
}).then(res => { // 处理返回的文件流
//new Blob([res])中不加data就会返回下图中[objece objece]内容(少取一层)
const blob = new Blob([res.data],{type: "application/vnd.ms-excel"});
const fileName = '字典数据.xlsx';//下载文件名称
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
})
感悟:一个小细节耽误自己了好久时间,所以在学编程的路上一定要弄明白原理 不然很容易绊脚。加油打工人!!!
更多推荐
已为社区贡献4条内容
所有评论(0)