缘由:
遇到后台返回二进制流文件(如excel,zip压缩文件等)
浏览器不会自动接收下载该文件,需要前后端共同合作。
解决方法:
可以创建<a>标签并使用Blob对象进行接收和下载(后端需修改返回数据头部信息)
别忘记删除<a>标签和释放Blob对象
### 代码展示:
// 导出信息
public async exportMeeting() {
// 单独设置导出接口返回类型为blob
const url = baseUrl + 'seeta/synchro/export';
const data = { meeting_key: this.selectMeetingKey };
// 必须设置{responseType: 'blob'},否则返回二进制流接收时会出错
const res = await axios.post(url, data, {responseType: 'blob'});
if (res) {
const blob = new Blob([res.data]);
const downloadElement = document.createElement('a');
const href = window.URL.createObjectURL(blob); // 创建下载的链接
downloadElement.href = href;
downloadElement.download = '会议表.xls'; // 下载后文件名
document.body.appendChild(downloadElement); // 追加a标签
downloadElement.click(); // 点击下载
document.body.removeChild(downloadElement); // 下载完成移除元素
window.URL.revokeObjectURL(href); // 释放掉blob对象
}
}
Tips:
创建下载文件时需要确定文件类型,否则下载后文件打开出错
而使用PostMan直接访问二进制流文件可直接下载解析为正确类型
后续研究中...