前端导出zip格式压缩包

1. 导入

import { saveAs } from 'file-saver'
import JSZip from 'jszip'
import axios from 'axios'

2.打包下载文件

//selectList 选中的数据 name //zip文件名字
  async handleBatchDownload(selectList, name) {
      const data = selectList;
      const zip = new JSZip();
      console.log("zip",zip)
      const cache = {};
      const promises = [];
      await data.forEach((item) => {
        console.log(item);
        // FileUrl 每个excel Url
        const promiseItem = this.getFile(item.FileUrl).then((dta) => {
          // dta为getFile处理过的arraybuffer格式的单个文件
          const file_name = item.FileName; // 处理名称
          zip.file(file_name, dta, { binary: true }); // 逐个添加文件
          cache[file_name] = dta;
        });
        promises.push(promiseItem);
      });
      Promise.all(promises).then(() => {
        zip
          .generateAsync({ type: "blob" })
          .then((content) => {
            // 生成二进制流
            saveAs(content, name + ".zip"); // 利用file-saver保存文件
            this.btnLoading = false;
            this.notify && this.notify.close();
          })
          .catch((err) => {
            console.error(err);
            this.btnLoading = false;
            this.$message.error("网络出现了一点小问题，请稍后重试");
          });
      });
    },

2. 获取文件的arraybuffer格式并传入进行打包准备

getFile(url) {
      return new Promise((resolve, reject) => {
        axios({
          method: "get",
          url,
          responseType: "arraybuffer",
        })
          .then((res) => {
            resolve(res.data);
          })
          .catch((error) => {
            reject(error.toString());
          });
      });
    },