vue ajax二进制文件乱码,vue axios 请求二进制流excel文件,response乱码
最后一次更新:既然楼主采纳了我的答案,但有些问题,我还是要仔细说说,为此我写了如下一段代码,为了方便,我是直接下载一个存在在服务器根目录下的xls。axios.get('http://127.0.0.1/1.XLS', {responseType: 'blob' //指定返回数据的格式为blob}).then(response => {console.log(response);//把res
最后一次更新:
既然楼主采纳了我的答案,但有些问题,我还是要仔细说说,为此我写了如下一段代码,为了方便,我是直接下载一个存在在服务器根目录下的xls。
axios.get('http://127.0.0.1/1.XLS', {
responseType: 'blob' //指定返回数据的格式为blob
})
.then(response => {
console.log(response);//把response打出来,看下图
let url = window.URL.createObjectURL(response.data);
console.log(url)
var a = document.createElement("a");
document.body.appendChild(a);
a.href = url;
a.download = '2.xls';
a.click();
window.URL.revokeObjectURL(url);
})
.catch(err => {
console.log(`接口调用失败`);
console.log(err);
})

这个图可以明显的看到,返回的response在的data 是一个blob Object
createObjectURL 函数,接受的参数是blob 类型或者是File 类型
所以说,我想创建的URL 对象只需要 如下代码
let url = window.URL.createObjectURL(response.data);
因为response.data 已经是一个blob Object 了,完全不需要再像楼主在评论在回复我的解决方案中哪样,用 let url = window.URL.createObjectURL(new Blob([res.data]))载入,哪为什么 这样的代码解决了楼主的问题呢,
个人猜想原因:
1.最有可能的原因,楼主请求的服务端,强制返回的就是二进制流,也就是说 responseType: 'blob' 根本没有作用,因为设置responseType也需要服务端兼容的,并不是你指定什么,服务端就一定会按照你的指定来返加
2.楼主在axios设置了拦截器,修改了返回数据,但这个可能性应该不大
楼主修改问题后第一次编辑如下:
楼主用文本编辑器打开一个Excel,然后告诉我们这个是乱码,这题当我没有答过,其实看文件头明显可以看出来,这已经是一个Excel文件了
原回答如下:
responseType: 'arraybuffer' 改成 responseType: 'blob'
let objectUrl = URL.createObjectURL(res.data);
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)