需要安装依赖

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

核心代码

/**
 * 下载文件 传数组
 * fileList
 * [
 *   {
 *     type:'file',
 *     name:'17034953113790548.png',
 *     url:'https://zwdev.oss-cn-beijing.aliyuncs.com/company_1/default/17034953113790548.png',
 *   },
 *   {
 *     type:'folder',
 *     name:'图片',
 *     children:[
 *       {
 *         type:'file',
 *         name:'17034953113790548.png',
 *         url:'https://zwdev.oss-cn-beijing.aliyuncs.com/company_1/default/17034953113790548.png',
 *       },
 *     ]
 *   }
 * ]
 * @param {*} fileList
 * @param fileName //zip文件名称 默认时间戳
 */
const promises = [];
export function downLoadZip(res, zip = new JSZip()) { // res是从接口请求下来的列表
  // 开始遍历
  res.forEach((item, index) => {
    if (item.fileType === "0") {
      let promiseFolder = zip.folder(item.fileName); // 创建文件夹
      if (item.children && item.children.length > 0) {
        getFloderChildren(item.children, promiseFolder); // 开始递归文件夹的内容
      }
    } else {
      let promise = getFile(item.fileUrl).then(data => {
        zip.file(item.fileName, data, { binary: true }); //文件名、文件流、是否为二进制 并添加进当前文件夹内
      });
      promises.push(promise);
    }
  });
  Promise.all(promises)
    .then(() => {
      zip.generateAsync({ type: "blob" }).then(content => {
        // 利用file-saver保存文件  自定义文件名
        FileSaver.saveAs(content, new Date().getTime());
      });
      return true;
    })
    .catch(err => {
      ElMessage.msgError("文件压缩失败");
    });
}
// 递归文件夹内容
function getFloderChildren(res, zip = new JSZip()) {
  res.map(item => {
    if (item.fileType === "0") {
      // 如果是文件夹，首先创建当前文件夹，然后传递当前路径和所在文件夹对象递归调用函数
      const newFold = zip.folder(item.fileName);
      if (item.children && item.children.length > 0) {
        return getFloderChildren(item.children, newFold);
      }
    } else {
      // 如果是文件使用zip对象创建文件
      // 请求文件时注意返回数据类型要设置blob类型
      let status = 200;
      let fileNameEndWith = /\.[^\.]+$/.exec(item.fileName);
      let fileUrlEndWith = /\.[^\.]+$/.exec(item.fileUrl);
      let suffix = "";
      if (fileUrlEndWith) {
        suffix = item.fileUrl.substring(fileUrlEndWith.index);
      }
      let promise = getFile(item.fileUrl).then(data => {
        status = data.status;
        if (status == 200) {
          zip.file(fileNameEndWith ? item.fileName : `${item.fileName}${suffix}`, data.data, {
            binary: true
          }); //文件名、文件流、是否为二进制
        }
      });
      if (status == 200) {
        promises.push(promise);
      }
    }
  });
}
function getFile(url) {
  return new Promise((resolve, reject) => {
    //通过请求获取文件blob格式
    let xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", url, true);
    xmlhttp.responseType = "blob";
    xmlhttp.onload = function () {
      if (this.status == 200) {
        resolve({
          status: 200,
          data: this.response
        });
      } else {
        resolve({
          // 需要返回,不然会被打断下载过程
          status: 500,
          data: null
        });
        // reject(this.status);
      }
    };
    xmlhttp.send();
  });
}