在項目中,我們通常需要導出一些數據,后臺傳輸過來的是文件流類型的,這時候前端就需要對傳輸過來的數據進行處理,然后下載文件。
我們可以把后臺傳過來的數據用blob對象接收。
/* 下載PDF的方法 */
downloadPdf = () => axios.post(`這是請求的接口路徑`, { responseType: 'blob' });
獲取的數據如下圖文件流blob對象.png
以谷歌瀏覽器舉個栗子:
- 點擊下載按鈕,請求后臺接口,獲取后臺傳輸過來的數據data
- axios中有個方法可以把文件流對象轉blob
- 根據window.URL.createObjectURL方法生成一個鏈接
- 創建一個a標簽元素
- 設置屬性,a.download = '你的文件名字',a.href = '剛剛生成的URL'
- 使這個標簽觸發點擊事件
- 移除元素
- 接受data之后的處理大致代碼如下
const blobUrl = window.URL.createObjectURL(data);
const title = '下載文件的標題.pdf';
const a = document.createElement('a');
a.style.display = 'none';
a.download = title;
a.href = blobUrl;
a.click();
document.body.removeChild(a);
下面是IE瀏覽器中處理方法:
- 接受data之后的處理大致代碼如下
if ('msSaveOrOpenBlob' in navigator) { // 判斷是ie的瀏覽器,調用ie文件下載的方法
const blob = new Blob([data], { type: 'application/pdf' });
const title = 'ie下載.pdf';
window.navigator.msSaveOrOpenBlob(blob, title);
}
如果是其他類型的文件,只需要把相應的后綴替換掉即可!