快捷導(dǎo)航

如何在JavaScript實(shí)現(xiàn)Blob文件流下載

更新時(shí)間：2024年05月07日 08:24:16 作者：沈清秋.

在JavaScript中可以使用瀏覽器提供的Blob對象和URL.createObjectURL()方法來實(shí)現(xiàn)文件流下載,這篇文章主要給大家介紹了關(guān)于如何在JavaScript實(shí)現(xiàn)Blob文件流下載的相關(guān)資料,需要的朋友可以參考下

一、下載

在 JavaScript 中，可以使用瀏覽器提供的 Blob 對象和 URL.createObjectURL() 方法來實(shí)現(xiàn)文件流下載。

下面是一個(gè)示例代碼，可以幫助了解如何在 JavaScript 中實(shí)現(xiàn)文件流下載：

function downloadFile(data, filename, type) {
    // 創(chuàng)建 Blob 對象
    const blob = new Blob([data], { type: type });

    // 判斷當(dāng)前瀏覽器是否是IE，由于IE是沒有download 方法的，需要用msSaveBlob() 或 msSaveOrOpenBlob()
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        // 兼容IE
        window.navigator.msSaveOrOpenBlob(blob, filename)
    } else {
        // 創(chuàng)建 URL 對象
        const url = URL.createObjectURL(blob);

        // 創(chuàng)建鏈接
        const link = document.createElement('a');
        link.href = url;
        link.download = filename;

        // 模擬點(diǎn)擊鏈接進(jìn)行下載
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

        // 釋放 URL 對象
        URL.revokeObjectURL(url);
    }
}

在這個(gè)示例中，我們定義了一個(gè) downloadFile() 函數(shù)，這個(gè)函數(shù)接受三個(gè)參數(shù)：data、filename 和 type。其中，data 表示要下載的數(shù)據(jù)流，filename 表示要保存的文件名，type 表示要下載的文件類型。

在函數(shù)中，我們首先使用 Blob 對象創(chuàng)建一個(gè)二進(jìn)制數(shù)據(jù)流，然后使用 URL.createObjectURL() 方法創(chuàng)建一個(gè) URL 對象。接著，我們創(chuàng)建一個(gè)鏈接元素，并將這個(gè)鏈接元素的 href 屬性設(shè)置為 URL 對象的 URL，將 download 屬性設(shè)置為要保存的文件名。最后，我們模擬點(diǎn)擊鏈接元素，啟動(dòng)下載操作。

當(dāng)下載完成后，我們需要釋放 URL 對象，以便瀏覽器可以回收這個(gè)對象的內(nèi)存。這個(gè)操作可以使用 URL.revokeObjectURL()方法來實(shí)現(xiàn)。

注意：IE中要使用window.navigator.msSaveOrOpenBlob 或 window.navigator.msSaveBlob來處理Blob對象
用法：

1.msSaveOrOpenBlob：提供保存和打開按鈕

2.msSaveBlob：只提供一個(gè)保存按鈕

二、請求

在使用axios請求的時(shí)候，加上responseType: 'blob'入?yún)ⅰＵ埱笫纠缦拢?/p>

axios({
  // 請求頭  
  headers: {
      Content-Type: 'application/json;charset=utf-8'  
  },
  responseType: 'blob', // // `responseType` 表示瀏覽器將要響應(yīng)的數(shù)據(jù)類型,選項(xiàng)有'arraybuffer', 'document', 'json', 'text', 'stream',瀏覽器專屬：'blob',默認(rèn)是'json'
  method: 'get', // 類型根據(jù)實(shí)際接口是get還是post
  url: '接口URL',
  params: {}, // URL參數(shù)
});

因?yàn)槲覀兪褂玫氖俏募飨螺d，所以返回的響應(yīng)對象就不是 json 類型，要換成 blob 類型.

三、示例

以下載excel為例：

axios({
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  responseType: 'blob',
  method: 'get',
  url: '#',
  params: {}
}).then(res => {
  downloadFile(res, '文件名稱','application/xlsx')
})

實(shí)際根據(jù)請求的方法換成是get請求還是post請求，下載不同的文件對應(yīng)不同的 Blob 類型，這邊excel文件下載用的是 application/xlsx，如果是下載別的類型的文件就換別的類型。

Blob相關(guān)的文檔可自行查看鏈接：

https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/type