前端实现附件批量下载

前言:

最近在工作时接到了一个，在公司产品中所有的文件下载模块中，添加一个支持批量下载列表中附件的按钮的需求。因此我在网上搜索了很多关于前端实现批量下载功能的文章。大体来说提供了两种思路。

1. 一个是，在传统的使用 iframe 元素实现下载功能的基础上做改进，也就是遍历附件列表，多次生成并销毁 iframe 模块，进而实现批量下载的功能。不知道是不是我的写法有问题，在使用的过程中的确是实现了批量下载，但是，下载每一个文件，都会唤起电脑的文件夹，进行文件下载位置以及文件名的二次确认。我觉得在大批量下载文件的时候肯定是不合适的，因此，我后面使用了第二种方法。
2. 另一种思路是，将所有要下载的文件先在前端进行打包压缩，然后下载下载，实现批量下载的功能，但我却没有在网上找我能很好理解的文章，最终在B站一个老师的视频下找到了解决问题的思路。因此接下来我将把我的思路整理下来，希望能对遇到相思困扰的人提供到帮助，当然其中有理解不到位的地方，还希望能得到路过大佬们的指正。

正文：

一、使用到的工具包：

jszip

npm i jszip

下文中不过多讲述 jszip 的api，仅说明会用到的几种方法，因为我也没找到我能比较好理解的 讲解jszip 方法的中文文档。后面我会结合官方文档，单独写一遍关于 jszip 方法的资料。

二、基本思路：

一般的文件下载思路，提供文件下载路径给，具备下载功能 标签，或者借助浏览器对象下提供的下载方法，实现下载功能，但，这些下载路径一个仅指向一个地址。不能多个地址写在一起，所以用这种思路实现批量下载不太合适。

因此，下面将使用 jszip 将多个文件，压缩为一个 zip文件，并创建 Blob URL 用来映射我们压缩好的文件，使其作为一个可以用来下载的路径，进而实现 前端进行 多个附件下载的功能。

三、Blob 对象

Blob 对象是一种表示二进制类型的大对象，常用在 互联网数据的下载、分片上传等使用场景，有着非常强大的功能。但这里我不过多展开，仅使用它生成 Bolb URL的方法，文章的最后 附上了一位大佬的总结。
我们可以将 压缩后的文件 创建为 Blob URL，这个 Bolb URL 也将指向 它的源对象。进而作为下载文件的路径，实现下载的功能

创建 Blob URL 的方法：

URL.createObjectURL（‘目标对象’）

四、实现步骤：

1. 将目标文件请求到本地并进行压缩。
2. 创建指向 压缩文件的 Blob URL
3. 使用Blob URL 作为下载路径，实现压缩文件的下载。

// 请求 附件列表中的文件
getFileBomb(url) {
      return new Promise((resolve) => {
        const xhr = new XMLHttpRequest();
        xhr.open("get", url, true);
        // 将请求返回值的类型设置为 bolb 型
        xhr.responseType = "blob";
        xhr.onload = () => {
          resolve(xhr.response);
        };
        xhr.send();
      });
  },

// 遍历 附件列表，将附件讲求回来并打包

multipleDownload() {
      // 构造 jszip 实例
      const zip = new JSZip();
      console.log("进行批量下载操作", this.fileList);
      this.fileList.forEach((item) => {
        // 获取选中的 Bolb型 目标文件，并将对应的promise对象，作为 zip.file 的参数，压缩到一起
        const blob = this.getFileBomb(item.filePath);
        zip.file(item.name, blob, {
          base64: true,
        });
      });
      // 生成完整的 Zip 文件的方法，返回值是一个 promise对象，我们可以操作文件的类型，在压缩成功后，通过resolve作为.then()的参数。
      zip .generateAsync({
          type: "blob",
        })
        .then((content) => {
            // content 即为压缩后的 zip文件，通过URL.createObjectURL 将，压缩为指向源文件的路径，再通过 浏览器的 location.href 方法，将压缩文件下载下来，进而实现 附件批量下载
          location.href = URL.createObjectURL(content);
        });
   },

参考文章和资料：

[Bolb基本介绍](http://t.csdnimg.cn/rBXyR)
[js下载并压缩多个文件](【js压缩并下载多个文件】 https://www.bilibili.com/video/BV18G4y1p7NK/?share_source=copy_web&vd_source=638c0f91f9b3efeb3723bc02036035b8)