項目需求

• 在項目開發(fā)中，經(jīng)常會遇到需要調(diào)用接口從后端獲取Blob二進制文件流，在前端通過Blob二進制文件流下載文件的需求。

Blob

• Blob（Binary Large Object）：表示二進制類型的大對象。在數(shù)據(jù)庫管理系統(tǒng)中，將二進制數(shù)據(jù)存儲為一個單一個體的集合。Blob 通常是影像、聲音或多媒體文件。在 JavaScript 中 Blob 類型的對象表示不可變的類似文件對象的原始數(shù)據(jù)。

• Blob構(gòu)造函數(shù)語法：

  new Blob(blobParts, options);
  

  • blobParts：Blob / BufferSource / String值的數(shù)組
  • options：可選對象
    • type：Blob 類型，通常是 MIME 類型，例如 text/plain
      • endings：默認(rèn)值為 transparent ，用于指定包含行結(jié)束符 \n 的字符串如何被寫入；第二個值為native，代表行結(jié)束符會被更改為適合宿主操作系統(tǒng)文件系統(tǒng)的換行符。

文件下載

• 首先創(chuàng)建一個axios實例用于請求接口，從后端獲取blob二進制流文件

  import axios from "axios";
  
  const service = axios.create({
    // axios中請求配置有baseURL選項，表示請求根路徑
    baseUrl: 'http:xx.xxx.xx.xx',
    // 超時
    timeout: 60000
  })
  

• 封裝下載blob二進制流文件的方法

  import { Message } from "element-ui";
  
  /**
   * 
   * @param {*} url 接口url
   * @param {*} data 接口傳參
   * @param {*} filename 文件名 
   */
  export function downloadFile (url, data, filename) {
    return service.post(url, data, {
        // axios將響應(yīng)的數(shù)據(jù)強制轉(zhuǎn)為blob
        responseType: 'blob',
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
      }).then((res) => {
  			// 判斷接口返回的數(shù)據(jù)類型，若返回類型為application/json，則證明獲取二進制文件流失敗
  			if (res.type === 'application/json') {
          //創(chuàng)建一個FileReader實例
  				const reader  = new FileReader();
          //讀取文件
  				reader.readAsText(response.data, 'utf-8');
  				reader.onload = function() {
            //讀取完成后，獲取msg接口返回信息，
          	const  {msg}  = JSON.parse(reader.result);
            // 使用Message組件彈出錯誤提示，如
            Message({ message: msg, type: "error" });
         	}
          return;
        }
      
      	// 接口返回數(shù)據(jù)為二進制流文件
        const content = res;
      	// 根據(jù)接口返回的二進制流創(chuàng)建Blob類文件對象
        const blob = new Blob([content]);
      	// 使用原生js創(chuàng)建一個a元素標(biāo)簽
        const elink = document.createElement("a");
      	// 獲取方法形參中的filename文件名
        elink.download = filename;
      	// 通過原生js讓a標(biāo)簽的display屬性值為none，從而隱藏a標(biāo)簽
        elink.style.display = "none";
      	// 通過blob創(chuàng)建下載的鏈接
      	const href = URL.createObjectURL(blob);
      	// 通過原生js讓a標(biāo)簽的href屬性為創(chuàng)建好的下載鏈接
        elink.href = URL.createObjectURL(blob);
      	// 在html中添加a標(biāo)簽
        document.body.appendChild(elink);
      	// 給a標(biāo)簽調(diào)用點擊事件，開始下載
        elink.click();
      	// 釋放掉blob對象
        URL.revokeObjectURL(elink.href);
      	// 在html中移除此a標(biāo)簽
        document.body.removeChild(elink);
      }).catch((err) => {
        console.error(err);
      });
  }
  

• 在vue項目utils文件夾下創(chuàng)建名為downloadFile.js的文件（文件名隨意），將上述兩段代碼復(fù)制粘貼其中。

• 使用封裝好的下載文件方法

  // 引入封裝好的下載方法，引入路徑為相對路徑
  import { downloadFile } from '../downloadFile.js'
  
  const batchCode = '28256'
  downloadFile('/photoreview/photoDeal/downLoadPhotoZip', { batchCode: batchCode }, batchCode + `批次相片.zip`).then(() => {
    // 文件下載成功后的操作
  	...
  })
  

總結(jié)

• 文件下載主要分為以下幾步：

  獲取二進制文件流

  根據(jù)二進制流創(chuàng)建Blob類文件對象

  創(chuàng)建一個a元素標(biāo)簽，并隱藏起來

  通過創(chuàng)建的Blob類文件對象創(chuàng)建下載鏈接

  給a標(biāo)簽指定文件名和下載鏈接

  將a標(biāo)簽添加進html中，并調(diào)用點擊事件，下載文件

  下載后釋放掉Blob類文件對象，并在html中移除此a標(biāo)簽

到此這篇關(guān)于JavaScript下載blob二進制文件流的文章就介紹到這了,更多相關(guān)js下載blob二進制文件流內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論