vue3 之 多张图片压缩下载

一、涉及的插件

　　① JSZip：jszip是一个用于创建、读取和编辑.zip文件的JavaScript库

　　② FileSaver：FileSaver 是一个用于在客户端保存文件的 JavaScript 库。它提供了一种简单的方式来将数据保存为本地文件，通常用于在浏览器中将动态生成的内容（如图像、文档、压缩文件等）保存到用户的计算机上。FileSaver 可以将 Blob 或 File 对象保存为本地文件，支持设置文件名和文件类型，非常适合用于下载动态生成的文件。

二、下载插件

　　① npm install jszip

　　② npm install file-saver --save

三、涉及的方法

　　① JSZip常用的方法

　　　　1）file(name, data, options)：向 ZIP 文件中添加一个文件，并指定文件名、文件内容和可选的选项。
　　　　2）loadAsync(data)：从给定的二进制数据中加载一个 ZIP 文件。
　　　　3）loadAsync(url, options)：从指定 URL 处加载一个 ZIP 文件。
　　　　4）folder(name)：创建一个文件夹，用于组织文件。
　　　　5）generateAsync(options, onUpdate)：生成 ZIP 文件，并返回一个 Promise 对象。
　　　　6）remove(name)：从 ZIP 文件中移除指定的文件或文件夹。
　　　　7）file(name, content, options)：向 ZIP 文件中添加一个文件。

　　② file-saver的方法

　　　　saveAs : 使用saveAs方法将Blob对象保存在本地计算机中。例如：‘saveAs(blob,'文件名')’

四、主要功能代码

const handleDownSamples = async () => {
  const zip = new JSZip();
  //   获取需要下载的数据
  const currentLocalStorageOne =
    activeTab.value === '1'
      ? JSON.parse(localStorage.getItem('sampleSelectionSelected') || '[]')
      : JSON.parse(localStorage.getItem('finalPieceSelected') || '[]');

  // 根据 item.albumId 进行从小到大排序
  currentLocalStorageOne.sort((a: any, b: any) => a.sort - b.sort);

  await Promise.all(
    currentLocalStorageOne.map(async (item: any) => {
      const res = await fetch(item.albumImage, { mode: 'cors' });
      const blob = await res.blob();
      const fileName = `${item.sort >= 10 ? item.sort : `0${item.sort}`}.png`;
      //  将Blob数据添加到ZIP文件中
      zip.file(fileName, blob, { binary: true });
    })
  );

  const timestamp = dayjs().format('YYYYMMDDHHmmss');
  //  文件名
  const filename = `${activeTab.value === '1' ? '选片样图' : '最终成片'
    }${timestamp}.zip`;

  zip.generateAsync({ type: 'blob' }).then((content: any) => {
    //  将Blob数据保存为指定的文件名
    FileSaver.saveAs(content, filename);
  });
};

　　

　　　　 注：该文档为个人理解所写，有误可建议修改