博客

前端处理二进制文件流

这个需求其实做了很久了，但是今天突然被人问起，自己却不知所措，表达不完整，所以想重新梳理一下。
问题叙述 ： 有时候需要点击一个 按钮 ，实现文件下载 ，而后端返回的数据为二进制流数据。

产生原因

前端页面的编码格式和服务端编码格式不同，正如此时，服务端返回的是 blob格式的数据，而我们使用的是 非 blob格式去解析，所以产生了乱码。
首先

接收二进制流

要想处理这段乱码的数据，首先得先接收，正常情况下axios 不会处理二进制数据，即会去接收但是不会去处理，需要在请求得适合设置 responseType: ‘blob’

axios.get({
    url: 'xxxxxx',
    method: 'get',
    data:{
     },
    responseType: 'blob', // 声明返回blob格式
}).then(res => {
	downLoadBlobFile(res.data, fileName, mimeType);
});

Blob
Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

二进制流转为 URL

拿到文件流之后，需要生成一个 URL 来实现下载，我们可以通过 URL.createObjectURL() 方法生成一个链接。

const blob = new Blob([res.data])  // res.data 为接口返回的数据，依实例而行
const URL = URL.createObjectURL(blob)  // 生成一个 Blob URL

这时候后端返回的文件流就会被保存在内存里，而生成的URL 就是文件流在内存中的地址（这个地址为临时的，浏览器在 document 卸载时，会自动释放它们）。

a 标签添加文件名

正常情况下，通过 window.location = url 就可以下载文件。浏览器判断这个链接是资源而不是页面，就会自动下载文件。
但是通过文件流生成的url 对应的资源是没有文件名的，需要添加文件名。这时候我们需要创建一个 a 标签实现这个功能。

const fileName = 'xxxx.xls'  // 文件名+后缀
const listNode = document.createElement("a")
listNode.download = fileName 
listNode.style.display = "none"
listNode.href = URL // 文件流生成的url
document.body.appendChild(listNode)
listNode.click()  // 模拟在按钮上实现一次鼠标点击
URL.revokeObjectURL(listNode.href)  // 释放 URL 对象
document.body.removeChild(listNode)  // 移除 a 标签

这样就完成了