简介由于安全因素，前端不能直接写入文件。但是在实际业务需求中，难免会遇到各种文件的下载和预览。如果服务器下载的文件以流的形式传输给前端，前端通常会将流转换成objectURL，使用a标签的download属性来下载文件。但是有时候会出现下载文件处理失败的场景，所以服务器报文的返回格式不再是stream，而是json。此时虽然前端可以正常导出文件，但是文件内容是服务端返回的消息，无法处理。多合适啊，这个时候，要是有一个读取流的方法就好了。本文简单介绍一下前端是如何读取二进制流的。二进制文件下载普通二进制文件下载：首先需要设置请求头的response-type为blob，其次当收到响应报文时，可以调用如下方法。functiondownload(blob){//创建一个blob链接leturl=URL.createObjectURL(blob)leta=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对象，浏览器内存willKeepareferencetothisobject//只有当文档被销毁时，这部分内存才会被释放//考虑到性能，最好在使用url之后释放这部分内存URL.revokeObjectURL(url)}binaryfile上面的阅读只是二进制流文件的一种通用下载方式。当服务端返回的responsetypecontent-type=application/json时，我们还是解析处理二进制流，这样会导致导出文件的内容出现问题，比如Excel中，内容就是来自的responsemessage服务器。因此，我们在处理服务器响应内容的时候，需要做一个预拦截。声明一个blob变量vardebug={hello:"world"};varblob=newBlob([JSON.stringify(debug,null,2)],{type:'application/json'})读取blob内容，主要有两种方式，FileReader和Response。FileReaderFileReader顾名思义，主要用于读取文件内容，兼容性好。读取内容有几种格式：readAsArrayBuffer、readAsBinaryString、readAsDataURL、readdAsText。FileReader读取方法主要如下：varreader=newFileReader()reader.addEventListener('loadend',function(e){//outputstring{hello:world}console.log(e.target.result)})reader.readAsText(blob)ResponseResponse是FetchAPI的接口，它呈现对请求数据的响应。浏览器兼容性比FileReader差，支持Chrome42+和FireFox39+。Response实例化让myResponse=newResponse(body,init)bodyBlobBufferSourceFormDataURLSearchParamsUSVStringinitstatusTextheadersResponse实现了body接口，所以在实例化Response的时候可以调用Body.blob(),body.formData(),body.json(),body.text()序列化返回值，返回值是一个Promise。具体实现方法如下：varblobReader=newResponse(blob).json()blobReader.then(res=>{console.log(res)})总结用解析服务端返回值的方法，当我们下载文件，可以判断服务器返回值的content-type。如果返回值不是blob，我们可以做一些自定义处理。ReferencesBlobFileReaderResponse
