前端处理后端返回多个文件地址，处理成压缩包

1、安装依赖

npm i axios
npm i jszip file-saver

注意：我这里使用node版本是16以上会报错！！！，使用12.14的就可以正常下载

2、引入

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

3、处理file

 getFile(url) {
      let that = this;
      return new Promise((resolve, reject) => {
        axios({
          method: "get",
          url,
          responseType: "arraybuffer",
          onDownloadProgress: function (progressEvent) {

          }
        })
          .then(data => {
            console.log(data);
            resolve(data.data);
          })
          .catch(error => {
            reject(error.toString());
          });
      });
    },

4、调用

 handleBatchExport() {
      if (this.selectionList.length === 0) {
        console.log(this.selectionList);
        this.$message.warning('请选择至少一条数据');
        return;
      }
      const data = []; // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
      //this.selectionList为多个下载数据的地址数组
      this.selectionList.forEach(item => {
        data.push(item) //item.address把文件路径添加在要下载的data数组中
      });
      const zip = new JSZip();
      const cache = {};
      const promises = [];
      data.forEach(item => {
        const promise = this.getFile(item.address).then(data => {
          // 下载文件, 并存成ArrayBuffer对象
          const arr_name = item.title;
          // const arr_name = arr_name[arr_name.length - 1]; // 获取文件名
          zip.file(arr_name, data, { binary: true }); // 逐个添加文件
          cache[arr_name] = data;
        });
        promises.push(promise);
      });

      Promise.all(promises).then(() => {
        zip.generateAsync({ type: "blob" }).then(content => {
          // 生成二进制流
          FileSaver.saveAs(content, "批量导出数据.zip"); // 利用file-saver保存文件
        });
      });
    },

非常简单！！！