前端下載文件一般使用的是blob
核心的步驟是獲取后端響應(yīng)的文件流，用blob創(chuàng)建一個臨時的URL，然后創(chuàng)建一個隱藏的<a>標簽，實現(xiàn)下載需求。
那就先上代碼
function download(item) {
axios.get(getServerUrl() + "/teacher/output/" + classId.value + "/" + item, {
responseType: 'blob', // 告訴瀏覽器響應(yīng)類型是 Blob
}).then((response) => {
let blob = new Blob([response.data]);
// 創(chuàng)建一個臨時 URL，用于下載
const url = URL.createObjectURL(blob);
let fileName = item + '簽到統(tǒng)計表.xls';
const a = document.createElement('a');
a.setAttribute('href', url);
a.setAttribute('download', fileName);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
// 釋放臨時 URL
URL.revokeObjectURL(url);
})
}如果后端響應(yīng)的數(shù)據(jù)是一個二進制數(shù)據(jù)，那我們就得這是響應(yīng)類型是blob，否則瀏覽器會默認按照json解析
至于后端如何向前端以文件流的形式發(fā)送文件，請看我的上一個隨筆Java后端向前端返回文件流——實現(xiàn)下載功能
是否會有朋友有個疑問，前端要不要在new BLob里面設(shè)置content-type，答案是不需要，其實你會發(fā)現(xiàn)設(shè)置與不設(shè)置效果一樣，但如果后端沒有設(shè)置，那么文件下載就會出問題。我之前在寫一個web項目要實現(xiàn)一個下載功能，一直以為要前端規(guī)定格式，結(jié)果后端就沒有設(shè)置，導致下載的文件格式錯誤。文章來源：http://www.zghlxwxcb.cn/news/detail-678185.html
所以說，只要后端的文件流正確，響應(yīng)類型設(shè)置正確，前端只需要將responseType設(shè)置為blob即可。文章來源地址http://www.zghlxwxcb.cn/news/detail-678185.html
到了這里，關(guān)于前端實現(xiàn)文件下載功能——文件流的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
