| 前端处理二进制文件流 | 您所在的位置：网站首页 › 二进制命名标签 › 前端处理二进制文件流 |
前端处理二进制文件流
|
前端处理二进制文件流
这个需求其实做了很久了，但是今天突然被人问起，自己却不知所措，表达不完整，所以想重新梳理一下。 问题叙述 ： 有时候需要点击一个 按钮 ，实现文件下载 ，而后端返回的数据为二进制流数据。 前端页面的编码格式和服务端编码格式不同，正如此时，服务端返回的是 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 标签这样就完成了 |
【本文地址】
公司简介
联系我们