前端读取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