javascripts 读取Blob内容

背景

最近在写kubernetes管理平台，其中实时展示容器日志时，后端传递给前端的数据类型为Blob内容，记录下读取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)
  var blobReader = new Response(blob).json()
  blobReader.then(res => {
      console.log(res)
  })

• body
  • Blob
  • BufferSource
  • FormData
  • URLSearchParams
  • USVString
• init
  • status
  • statusText
  • headers

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

参考

Blob