vue 下载/导出/保存二进制流文件 以及解决导出失败问题
二进制文件、responseType、blob
·
// api封装
export: data => request({ url: '/api/export', method: 'post', responseType: 'blob', data }),
// 导出方法封装
export function saveFile(data, name) {
// data 为二进制文件, name 文件名
try {
const blobUrl = window.URL.createObjectURL(data);
const a = document.createElement('a');
a.style.display = 'none';
a.download = name;
a.href = blobUrl;
a.click();
} catch (e) {
alert('保存文件出错');
}
}
// 实际使用
exported() {
this.$api.export(this.form).then(res => {
if (res.status == 200) {
const blob = new Blob([res.data]);
saveFile(blob, '基础数据.xlsx');
};
});
},
踩坑:responseType: 'blob’不生效的问题
先控制台打印返回实体中的响应类型responseType是否为blob或者其他文件类型,
这里data直接返回的是字符串,responseType值也为空,说明blob没有生效

这里可以看到 responseType值为空,虽然上面接口设置了 responseType: 'blob'也并没有生效. 那么没有生效的问题在哪里呢。
下面,我们看下我们axios接口封装的时候,是否有设置responseType
之前就是别人已经封装好的框架,搞了半天这里请求没有写入responsetype,所以不生效。自己也有点无语了…
不过找到问题就行了,下面我们看看改了之后的返回格式
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)