前端读取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顾名思义,这个对象主要就是用来读取文件内容,兼容性比较好,有以下几种读取内容格式:readAsArrayBufferreadAsBinaryStringreadAsDataURLreaddAsTextFileReader读取方法主要如下所示:

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

Response

ResponseFetch 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

你可能感兴趣的:(前端读取Blob内容)