php前端取blob数据,前端读取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)

body

Blob

BufferSource

FormData

URLSearchParams

USVString

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,我们可以做一些自定义处理。

参考资料