在項(xiàng)目中浆竭，我們通常需要導(dǎo)出一些數(shù)據(jù)，后臺(tái)傳輸過(guò)來(lái)的是文件流類型的惨寿，這時(shí)候前端就需要對(duì)傳輸過(guò)來(lái)的數(shù)據(jù)進(jìn)行處理邦泄，然后下載文件。
我們可以把后臺(tái)傳過(guò)來(lái)的數(shù)據(jù)用blob對(duì)象接收裂垦。
/* 下載PDF的方法 */
downloadPdf = () => axios.post(`這是請(qǐng)求的接口路徑`, { responseType: 'blob' });
文件流blob對(duì)象.png
以谷歌瀏覽器舉個(gè)栗子：
- 點(diǎn)擊下載按鈕顺囊，請(qǐng)求后臺(tái)接口，獲取后臺(tái)傳輸過(guò)來(lái)的數(shù)據(jù)data
- axios中有個(gè)方法可以把文件流對(duì)象轉(zhuǎn)blob
- 根據(jù)window.URL.createObjectURL方法生成一個(gè)鏈接
- 創(chuàng)建一個(gè)a標(biāo)簽元素
- 設(shè)置屬性蕉拢，a.download = '你的文件名字'特碳，a.href = '剛剛生成的URL'
- 使這個(gè)標(biāo)簽觸發(fā)點(diǎn)擊事件
- 移除元素
- 接受data之后的處理大致代碼如下
const blobUrl = window.URL.createObjectURL(data);
const title = '下載文件的標(biāo)題.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的瀏覽器诚亚，調(diào)用ie文件下載的方法
const blob = new Blob([data], { type: 'application/pdf' });
const title = 'ie下載.pdf';
window.navigator.msSaveOrOpenBlob(blob, title);
}
如果是其他類型的文件，只需要把相應(yīng)的后綴替換掉即可午乓！
