前端實現文件下載功能——文件流

前端下載文件一般使用的是blob

核心的步驟是獲取後端響應的文件流，用blob創建一個臨時的URL，然後創建一個隱藏的<a>標簽，實現下載需求。

那就先上代碼

function download(item) {
    axios.get(getServerUrl() + "/teacher/output/" + classId.value + "/" + item, {
        responseType: 'blob', // 告訴瀏覽器響應類型是 Blob
    }).then((response) => {
        let blob = new Blob([response.data]);
        // 創建一個臨時 URL，用於下載
        const url = URL.createObjectURL(blob);
        let fileName = item + '簽到統計表.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);
    })
}

如果後端響應的數據是一個二進位數據，那我們就得這是響應類型是blob，否則瀏覽器會預設按照json解析

至於後端如何向前端以文件流的形式發送文件，請看我的上一個隨筆Java後端向前端返迴文件流——實現下載功能

是否會有朋友有個疑問，前端要不要在new BLob裡面設置content-type，答案是不需要，其實你會發現設置與不設置效果一樣，但如果後端沒有設置，那麼文件下載就會出問題。我之前在寫一個web項目要實現一個下載功能，一直以為要前端規定格式，結果後端就沒有設置，導致下載的文件格式錯誤。

所以說，只要後端的文件流正確，響應類型設置正確，前端只需要將responseType設置為blob即可。