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 对象