緣由:
遇到后臺返回二進(jìn)制流文件(如excel,zip壓縮文件等)
瀏覽器不會自動接收下載該文件箱锐,需要前后端共同合作渡蜻。
解決方法:
可以創(chuàng)建<a>標(biāo)簽并使用Blob對象進(jìn)行接收和下載(后端需修改返回?cái)?shù)據(jù)頭部信息)
別忘記刪除<a>標(biāo)簽和釋放Blob對象
### 代碼展示:
// 導(dǎo)出信息
public async exportMeeting() {
// 單獨(dú)設(shè)置導(dǎo)出接口返回類型為blob
const url = baseUrl + 'seeta/synchro/export';
const data = { meeting_key: this.selectMeetingKey };
// 必須設(shè)置{responseType: 'blob'},否則返回二進(jìn)制流接收時會出錯
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); // 創(chuàng)建下載的鏈接
downloadElement.href = href;
downloadElement.download = '會議表.xls'; // 下載后文件名
document.body.appendChild(downloadElement); // 追加a標(biāo)簽
downloadElement.click(); // 點(diǎn)擊下載
document.body.removeChild(downloadElement); // 下載完成移除元素
window.URL.revokeObjectURL(href); // 釋放掉blob對象
}
}
Tips:
創(chuàng)建下載文件時需要確定文件類型狐蜕,否則下載后文件打開出錯
而使用PostMan直接訪問二進(jìn)制流文件可直接下載解析為正確類型
后續(xù)研究中...