JavaScript下载blob二进制文件流的详细步骤

这篇文章主要给大家介绍了关于JavaScript下载blob二进制文件流的详细步骤从创建axios实例请求接口,到封装下载方法,再到具体实现步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下

项目需求

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

Blob

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

• Blob构造函数语法：

  new Blob(blobParts, options);
  

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

文件下载

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

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

• 封装下载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);
      });
  }
  

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

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

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

总结

• 文件下载主要分为以下几步：

  获取二进制文件流

  根据二进制流创建Blob类文件对象

  创建一个a元素标签，并隐藏起来

  通过创建的Blob类文件对象创建下载链接

  给a标签指定文件名和下载链接

  将a标签添加进html中，并调用点击事件，下载文件

  下载后释放掉Blob类文件对象，并在html中移除此a标签

到此这篇关于JavaScript下载blob二进制文件流的文章就介绍到这了,更多相关js下载blob二进制文件流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

• Vue利用Blob下载原生二进制数组文件