VUE 如何实现多个文件导出为一个zip格式并下载_vue下载zip文件

项目需求：

将多个文件导出为一个zip格式压缩包，点击<批量下载>按钮下载选中的几个文件

1、安装jszip和file-saver插件

npm install jszip
npm install file-saver

2、在所需页面引入

import JSZip from "jszip";
import FileSaver from "file-saver";

3、模拟fileList数组

[
    {
        "answerName": "名字1",
        "answer": "https://地址1"
    },
    {
        "answerName": "名字2",
        "answer": “https://地址2"
    }
]

4、在methods中定义方法

// 下载全部附件   downloadBtn<下载全部附件>按钮绑定事件
      downloadBtn() {
        var blogTitle = `学生答案批量下载`; // 下载后压缩包的名称
        var zip = new JSZip();
        var promises = [];
        let cache = {};
        for (let item of this.fileList) {
          // item.answer为文件链接地址
          // item.answerName为文件名称
          if (item.answer) {
            const promise = this.getImgArrayBuffer(item.answer).then((data) => {
              // 下载文件, 并存成ArrayBuffer对象(blob)
              zip.file(item.answerName, data, {
                binary: true
              }); // 逐个添加文件
              cache[item.answerName] = data;
            });
            promises.push(promise);
          } else {
            // answer地址不存在时提示
            alert(`附件${item.answerName}地址错误，下载失败`);
          }
        }
        Promise.all(promises).then(() => {
          zip.generateAsync({
            type: "blob"
          }).then((content) => {
            // 生成二进制流
            FileSaver.saveAs(content, blogTitle); // 利用file-saver保存文件  blogTitle:自定义文件名
          });
        }).catch((res) => {
          alert("文件压缩失败");
        });
      },
      //文件以流的形式获取（参数url为文件链接地址）
      getImgArrayBuffer(url) {
        return new Promise((resolve, reject) => {
          //通过请求获取文件blob格式
          let xmlhttp = new XMLHttpRequest();
          xmlhttp.open("GET", url, true);
          xmlhttp.responseType = "blob";
          xmlhttp.onload = function() {
            if (xmlhttp.status == 200) {
              resolve(xmlhttp.response);
            } else {
              reject(xmlhttp.response);
            }
          };
          xmlhttp.send();
        });
      },

以上为全部代码，缺点是有一定的等待下载时间，这个需要后续的处理

我在按钮的地方添加了一个loading特效来处理的

<el-button type="primary" size="small" @click="downloadBtn" :loading="btnloading">
   {{ btnloading ? '下载中...' : '批量下载' }}
</el-button>