javascript 之 Blob對象


Blob = Binary Large Object 的縮寫,直譯為二進制大對象,雖然在大多數前端開發中並不常見,但實際上在MYSQL數據庫中,可以通過設置一個BLOB類型的數據來存儲一個BLOB對象的內容

使用blob對象是在接受后台返回的數據流,導出數據,下載excel是用於處理后端返回的數據流,后端返回的是一個下載鏈接,類似這樣的:

Blob()

Blob() 構造函數返回一個新的 Blob 對象。 blob的內容由參數數組中給出的值的串聯組成。

var aBlob = new Blob( array, options );

  • array 是一個由ArrayBufferArrayBufferViewBlobDOMString 等對象構成的 Array ,或者其他類似對象的混合體,它將會被放進 Blob。DOMStrings會被編碼為UTF-8。
  • options 是一個可選的BlobPropertyBag字典,它可能會指定如下兩個屬性:
    • type,默認值為 "",它代表了將會被放入到blob中的數組內容的MIME類型。
    • endings,默認值為"transparent",用於指定包含行結束符\n的字符串如何被寫入。 它是以下兩個值中的一個: "native",代表行結束符會被更改為適合宿主操作系統文件系統的換行符,或者 "transparent",代表會保持blob中保存的結束符不變

創建一個Blob對象

本段落大致看看,知道如何創建Blob對象就可以。

const blob = new Blob([response.data], {
            type: "application/vnd.ms-excel;charset=utf-8"
          });

對象上的方法

1、 Blob.size 獲取blob對象的大小(字節)

2、Blob.type 獲取文件類型

  1. Blob.slice([start[, end[, contentType]]]) 返回一個新的Blob對象,包含了源Blob對象中指定范圍內的數據。通常可用於大文件截取上傳

生成Blob鏈接

可以借助window.URL(點我跳轉到官網) 對象上的方法。

1、URL.createObjectURL(blob); 如果傳入的參數是blob對象的話,則可以生成一個blob鏈接。並賦值給了a標簽的href屬性。通過a標簽的download屬性觸發下載方法,下載名為fileNamet的文本文檔。


  const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);     //
            elink.click();      //默認點擊a標簽觸發下載,
            URL.revokeObjectURL(elink.href); // 釋放URL 對象
            document.body.removeChild(elink);
2、默認點擊a標簽觸發下載,
3、URL.revokeObjectURL() 靜態方法用來釋放一個之前通過調用 URL.createObjectURL() 創建的已經存在的 URL 對象。當你結束使用某個 URL 對象時,應該通過調用這個方法來讓瀏覽器知道不再需要保持這個文件的引用了。

日常應用

1、可用於隱藏視頻播放器的真實地址
由於需要后台支撐,故可參考https://blog.csdn.net/qincidong/article/details/82781699

2、使用 createObjectURL(blob) 輸出頁面,移動端長按保存,轉發。

3、開源代碼庫可以在線自定義配置文件並下載JSON,也可以通過blob的方式生成。






免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM