js下载blob二进制文件流

项目需求

1. 在项目开发中，经常会遇到需要调用接口从后端获取Blob二进制文件流，在前端通过Blob二进制文件流下载文件的需求。

Blob

1. Blob（Binary Large Object）：表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。

2. Blob构造函数语法：

   new Blob(blobParts, options);
   

   • blobParts：Blob / BufferSource / String值的数组
   • options：可选对象
     • type：Blob 类型，通常是 MIME 类型，例如 text/plain
       • endings：默认值为 transparent ，用于指定包含行结束符 \n 的字符串如何被写入；第二个值为native，代表行结束符会被更改为适合宿主操作系统文件系统的换行符。

文件下载

1. 首先创建一个axios实例用于请求接口，从后端获取blob二进制流文件

   import axios from "axios";const service = axios.create({// axios中请求配置有baseURL选项，表示请求根路径baseUrl: 'http:xx.xxx.xx.xx',// 超时timeout: 60000
   })
   

2. 封装下载blob二进制流文件的方法

   import { Message } from "element-ui";/*** * @param {*} url 接口url* @param {*} data 接口传参* @param {*} filename 文件名 */
   export function downloadFile (url, data, filename) {return service.post(url, data, {// axios将响应的数据强制转为blobresponseType: 'blob',headers: {"Content-Type": "application/json;charset=UTF-8",},}).then((res) => {// 判断接口返回的数据类型，若返回类型为application/json，则证明获取二进制文件流失败if (res.type === 'application/json') {//创建一个FileReader实例const reader  = new FileReader();//读取文件reader.readAsText(response.data, 'utf-8');reader.onload = function() {//读取完成后，获取msg接口返回信息，const  {msg}  = JSON.parse(reader.result);// 使用Message组件弹出错误提示，如Message({ message: msg, type: "error" });}return;}// 接口返回数据为二进制流文件const content = res;// 根据接口返回的二进制流创建Blob类文件对象const blob = new Blob([content]);// 使用原生js创建一个a元素标签const elink = document.createElement("a");// 获取方法形参中的filename文件名elink.download = filename;// 通过原生js让a标签的display属性值为none，从而隐藏a标签elink.style.display = "none";// 通过blob创建下载的链接const href = URL.createObjectURL(blob);// 通过原生js让a标签的href属性为创建好的下载链接elink.href = URL.createObjectURL(blob);// 在html中添加a标签document.body.appendChild(elink);// 给a标签调用点击事件，开始下载elink.click();// 释放掉blob对象URL.revokeObjectURL(elink.href);// 在html中移除此a标签document.body.removeChild(elink);}).catch((err) => {console.error(err);});
   }
   

3. 在vue项目utils文件夹下创建名为downloadFile.js的文件（文件名随意），将上述两段代码复制粘贴其中。

4. 使用封装好的下载文件方法

   // 引入封装好的下载方法，引入路径为相对路径
   import { downloadFile } from '../downloadFile.js'const batchCode = '28256'
   downloadFile('/photoreview/photoDeal/downLoadPhotoZip', { batchCode: batchCode }, batchCode + `批次相片.zip`).then(() => {// 文件下载成功后的操作...
   })
   

总结

1. 文件下载主要分为以下几步：
   1. 获取二进制文件流
   2. 根据二进制流创建Blob类文件对象
   3. 创建一个a元素标签，并隐藏起来
   4. 通过创建的Blob类文件对象创建下载链接
   5. 给a标签指定文件名和下载链接
   6. 将a标签添加进html中，并调用点击事件，下载文件
   7. 下载后释放掉Blob类文件对象，并在html中移除此a标签