js下载blob二进制文件流

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将响应的数据强制转为blob
       responseType: '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标签