如何在React.js中使用JavaScript将多张图片打包为ZIP文件夹下载

• 首先需要安装两个工具库：JSZip负责压缩打包文件，FileSaver负责触发浏览器下载，安装命令：
  npm install jszip file-saver
• 替换原有下载逻辑，完整代码如下：

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

const batchDownloadAsZip = async () => {
  // 实例化压缩包对象
  const zip = new JSZip();
  // 创建assets子文件夹
  const assetsFolder = zip.folder('assets');

  for(let k=1; k<=5; k++){
    // 此处保留你原来生成canvas的逻辑
    const canvas = canvas.current;
    // 将canvas转为base64格式的PNG
    const base64Data = canvas.toDataURL("image/png").split(',')[1];
    // 把图片添加到assets文件夹下
    assetsFolder.file(`img_${k}.png`, base64Data, {base64: true});
  }

  // 生成zip压缩包并触发下载
  const zipContent = await zip.generateAsync({type: 'blob'});
  saveAs(zipContent, 'canvas_images.zip');
}

• 逻辑说明：
  • 不再单独触发每个图片的下载，而是先把所有canvas转换后的图片资源全部添加到压缩包的assets目录下
  • 所有资源添加完成后统一生成zip二进制文件，触发一次下载即可得到包含所有图片的压缩包
• 注意事项：
  • 如果canvas绘制了跨域图片，需要给对应图片资源配置CORS，否则toDataURL会执行报错
  • 若需要导出的图片数量多、体积大，可以在generateAsync方法中添加进度回调，给用户展示加载状态

原有单张下载效果参考：

内容的提问来源于stack exchange，提问作者bilalo