前端读取Blob内容

简述

前端因为安全方面的因素，不能直接对文件进行写操做。可是在实际的业务需求中，不免会遇到各类各样文件的下载、预览。 若是服务端下载文件是以流的形式传递到前端，前端一般是将流转换为objectURL,借用a标签的download属性，进行文件下载。可是有时候会遇到下载文件处理失败的场景，这样服务端消息的返回格式再也不是流，而是json，此时虽然前端能够正常导出文件，可是文件内容是服务端返回的消息，处置不怎么稳当，这个时候，能有读取流的方法就行了。本文简要概述下，前端读取二进制流的方法。

二进制文件下载

普通的二进制文件下载：首先须要将请求头的response-type设置为blob，其次，在接收到响应消息时，能够调用如下方法。

function download(blob) {
    // 建立一个blob连接
    let url = URL.createObjectURL(blob)
    let a = document.createElement('a')
    a.setAttribute('download', url)
    a.href=ur;
    a.style.display = 'none'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    // 每次调用URL.createObjectURL,都会建立一个新的URL对象，浏览器内存中会保持对该对象的引用
    // 只有在document销毁时，才会释放此部份内存
    // 在考虑性能的状况下，在url使用结束后，最好释放此部份内存
    URL.revokeObjectURL(url)
}
复制代码

二进制文件读取

上述只是二进制流文件通常的下载方式，当服务端传回的响应类型content-type=application/json时，咱们仍以二进制流的方式去解析处理，会致使导出文件内容出现问题，好比Excel中，内容为服务端响应的消息，所以，咱们在处理服务器响应内容时，须要作下前置的拦截。

• 声明一个blob变量

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

blob内容的读取，主要有两种方式，FileReader和Response。

FileReader

FileReader顾名思义，这个对象主要就是用来读取文件内容，兼容性比较好，有如下几种读取内容格式：readAsArrayBuffer、readAsBinaryString、readAsDataURL、readdAsText。FileReader读取方法主要以下所示：

var reader = new FileReader()
  reader.addEventListener('loadend', function (e) {
    // 输出字符串 {hello: world}
    console.log(e.target.result)
  })
  reader.readAsText(blob)
复制代码

Response

Response是Fetch API的一个接口，呈现的是对一次请求数据的响应。浏览器兼容性比FileReader要差点，支持Chrome 42+、FireFox 39+。

Response实例化

let myResponse = new Response(body, init)
复制代码

1. body
   • Blob
   • BufferSource
   • FormData
   • URLSearchParams
   • USVString
2. init
   • status
   • statusText
   • headers

Response实现了body接口，因此，在实例化Response时，能够调用Body.blob()、body.formData()、body.json()、body.text()序列化返回值，返回值是一个Promise。具体实现方法以下所示：

var blobReader = new Response(blob).json()
  blobReader.then(res => {
      console.log(res)
  })
复制代码

小结

有了解析服务器返回值的方法，咱们在下载文件时，就能够多判断服务器返回值的content-type,若是返回值不是blob,咱们能够作一些自定义处理。

参考资料

• Blob
• FileReader
• Response