Blob文件處理

Blob對象簡要介紹

Blob 對象表示一個不可變、原始數據的類文件對象。Blob 表示的不一定是JavaScript原生格式的數據。File 接口基於Blob，繼承了 Blob 的功能並將其擴展使其支持用戶系統上的文件。

語法

const aBlob = new Blob( array, options ); 

參數說明

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

示例

const debug = {hello: "world"}; const blob = new Blob([JSON.stringify(debug, null, 2)],{type : 'application/json'}); 

URL.createObjectURL() 與 URL.revokeObjectURL()介紹

URL.createObjectURL() 靜態方法會創建一個 DOMString，其中包含一個表示參數中給出的對象的URL。這個 URL 的生命周期和創建它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。相當於這個方法創建了一個傳入對象的內存引用地址

createObjectURL語法

objectURL = URL.createObjectURL(object);

參數說明

• object 是用於創建 URL 的 File 對象、Blob 對象或者 MediaSource 對象。​

返回值

• 一個可以引用到指定對象的DOMString

URL.revokeObjectURL() 靜態方法用來釋放一個之前已經存在的、通過調用 URL.createObjectURL() 創建的 URL 對象。當你結束使用某個 URL 對象之后，應該通過調用這個方法來讓瀏覽器知道不用在內存中繼續保留對這個文件的引用了。

你可以在 sourceopen 被處理之后的任何時候調用 revokeObjectURL()。這是因為 createObjectURL() 僅僅意味着將一個媒體元素的 src 屬性關聯到一個 MediaSource 對象上去。調用revokeObjectURL() 使這個潛在的對象回到原來的地方，允許平台在合適的時機進行垃圾收集。

revokeObjectURL語法

window.URL.revokeObjectURL(objectURL);

參數說明

• objectURL 是一個 DOMString，表示通過調用 URL.createObjectURL() 方法產生的 URL 對象。

內存管理

在每次調用createObjectURL() 方法時，都會創建一個新的 URL 對象，即使你已經用相同的對象作為參數創建過。當不再需要這些 URL 對象時，每個對象必須通過調用 URL.revokeObjectURL() 方法來釋放。瀏覽器會在文檔退出的時候自動釋放它們，但是為了獲得最佳性能和內存使用狀況，你應該在安全的時機主動釋放掉它們。

示例：Excal下載

axios({
                url: '',
                method: "post",
                responseType: 'arraybuffer',
            }).then((res) => {
                let blob = new Blob([res.data], {type: 'application/octet-stream'})
                let url = URL.createObjectURL(blob)
                let a = document.createElement('a')
                document.body.appendChild(a)
                a.href = url
                a.download = 'result.xls'
                a.target = '_blank'
                a.click();
                a.remove()
            })

　　

 

 

  this. $http({

                 url:  this. $http. adornUrl( 'insurance/downloadAttachModel'),

                 method:  "post",

                 responseType:  'arraybuffer',

            }). then(( res)  => {

                 let  blob =  new  Blob([ res. data], { type:  'application/octet-stream'})

                 let  url =  URL. createObjectURL( blob)

                 let  a =  document. createElement( 'a')

                 document. body. appendChild( a)

                 a. href =  url

                 a. download =  'result.xls'

                 a. target =  '_blank'

                 a. click();

                 a. remove()

            })