JS : Blob() 轉換二進制下載文件流實例

構造Blob對象

Blob對象表示一個不可變的, 原始數據的相似文件對象

var bolb = new Blob( array, options );
複製代碼

array是一個包含實際數據的數組
options是可選的配置屬性，其中type是數據的類型

下載文件流

下載文件流的兩種方式：blob = new Blob([this.response], {type: type})

1.Blob 和 msSaveBlob 以本地方式保存文件
window.navigator.msSaveBlob(blob, fileName)

2.Bolb、URL和<a>配合下載
objectUrl = window.URL.createObjectURL(blob)建立新的URL表示指定Blob對象
a = document.createElement('a')建立a標籤
a.href = objectUrl指定下載連接
a.download = fileName指定下載文件名
a.click()觸發下載
a.remove()除a標籤
window.URL.revokeObjectURL(objectUrl)釋放

實例

let fileName = 'kiwi' + '.pdf'
# 建立對象
let xhr = xhr = new XMLHttpRequest()
# 建立一個 GET 請求，異步
xhr.open('GET', http://..., true)
# 設置返回數據的類型爲arraybuffer
xhr.responseType = 'arraybuffer'
# 設置請求頭值
xhr.setRequestHeader(KEYS.JWTToken, getStorageItem(KEYS.JWTToken))
# 接收到完整的響應數據時觸發回調處理函數
xhr.onload = function() {
    if (this.status === 200) {
      # 獲取請求頭Content-Type的值，用來判斷是不是文件流下載
      let type = xhr.getResponseHeader('Content-Type')
      # application/json;charset=UTF-8：就是指「無類型」，通常的字節流用於數據傳輸，非文件下載
      if (type === 'application/json;charset=UTF-8') {
        # this.response爲arraybuffer對象，轉爲uint8數組
        let uint8 = new Uint8Array(this.response)
        # 解決使用fromCharCode後中文亂碼的問題
        let resToString = decodeURIComponent(escape((String.fromCharCode(...uint8))))
        let message = JSON.parse(resToString).message
        console.log(message)
        return
      }
      # Blob()的第一個參數必須爲數組，即便只有一個字符串也必須用數組裝起來
      var blob = new Blob([this.response], {type: type})
      # window.navigator.msSaveBlob：以本地方式保存文件
      if (typeof window.navigator.msSaveBlob !== 'undefined') {
        window.navigator.msSaveBlob(blob, fileName)
      } else {
        # 建立新的URL表示指定的File對象或者Blob對象
        let URL = window.URL || window.webkitURL
        let objectUrl = URL.createObjectURL(blob)
        if (fileName) {
          # 建立a標籤用於跳轉至下載連接
          var a = document.createElement('a')
          # download：指示瀏覽器下載URL而不是導航到它，也可設置下載文件的名稱
          if (typeof a.download === 'undefined') {
            # window.location：得到當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面
            window.location = objectUrl
          } else {
            # href屬性指定下載連接
            a.href = objectUrl
            # dowload屬性指定文件名
            a.download = fileName
            # 將a標籤插入body中
            document.body.appendChild(a)
            # click()事件觸發下載
            a.click()
            # 去除a標籤，以避免影響其餘操做
            a.remove()
          }
        } else {
          window.location = objectUrl
        }
        # 將URL釋放
        URL.revokeObjectURL(objectUrl)
      }
    }
}
xhr.send()
複製代碼

用slice(star, end)對Blod對象進行切分

var kiwi = ["Hi", "kiwi"];
var blob = new Blob(kiwi, { "type" : "text/xml" });
var newBlob = blob.slice(0, 3);
//blob -> Blob{size: 6, type: "text/xml"}
//newBlob -> Blob{size: 3, type: ""}
複製代碼

Blob 屬性(只讀)

size：Bolb的大小，單位爲字節。（應用：判斷文件大小）
type：Bolb的MIME類型，若是類型未知，則爲""。（應用：判斷文件類型）
複製代碼

參考資料：

JavaScript 中 Blob 對象