Vue实现前端本地打包为一个zip文件

1、应用场景：打包批量下载的二维码图片

2、实际后端返回数据格式：图片链接数组集合，每个图片链接打开都是一张二维码图片

3、代码实现如下：

元素代码

<el-button
          type="primary"
          icon="el-icon-download"
          size="mini"
          @click="downloadCode">
          下载二维码
</el-button>

js代码
第一步安装依赖包
npm i axios, JSZip, FileSaver -s

<script>
// 引入依赖包
import JSZip from "jszip";
import FileSaver from "file-saver";
import axios from "axios";
// 方法封装
const getFile = (url) => {
  return new Promise((resolve, reject) => {
    axios({
      method: "get",
      url,
      responseType: "blob",
    })
      .then((data) => {
        resolve(data.data);
      })
      .catch((error) => {
        reject(error.toString());
      });
   });
  };
// 方法定义
filesToRar(urlData) {
    const zip = new JSZip();
    const cache = {};
    const promises = [];
      urlData.forEach((item) => {
        const promise = getFile(item).then((data) => {
          // 下载文件, 并存成ArrayBuffer对象
          const arr_name = item.split("/");
          const file_name = arr_name[arr_name.length - 1]; // 获取文件名
          zip.file(file_name, data, { binary: true }); // 逐个添加文件
          cache[file_name] = data;
        });
        promises.push(promise);
      });

      Promise.all(promises).then(() => {
        zip.generateAsync({ type: "blob" }).then((content) => {
          // 生成二进制流
          FileSaver.saveAs(content, "种公猪二维码压缩文件.zip"); // 利用file-saver保存文件
        });
      });
    },
//以下写我们的请求方法并获取url地址数据
// 下载二维码
 downloadCode() {
      apiDownloadORCode({ pigArchivesIds: this.multipleSelection })
        .then((res) => {
         // 获取url数据集合
          console.warn( res.data.codeUrl)//["图片链接1","图片链接2"]
          var urlData = res.data.codeUrl;
         // 将url集合放入方法中获取zip格式文件
          this.filesToRar(urlData);
        })
        .catch((err) => {
          console.log(err);
          this.msgError("请求失败请重试");
        })
        .finally(() => {
          this.multipleSelection = [];
          this.getPigList();
        });
    },
</script>

参考文档链接: link.
将批量下载的图片打包成一个zip压缩文件的主要实现方法已贴出，有更有建议可在评论区留下宝贵的建议
注：在filesToRar方法里面的参数是数组格式，如果你的需求是将一张图片进行打包压缩的话，可在filesToRar方法内部对参数urlData进行处理，只可在方法内部做两步处理即可

let urlDatas = [urlData];
urlDatas.forEach(item=>{
......
})