【JSZip】前端图片打包下载实现

一、流程图

并发 fetch 图片 → 打包 zip → 触发下载

二、代码实现

import JSZip from 'jszip';

/**
 * 将图片 URL 列表打包为 zip 并下载（浏览器端，不依赖 file-saver）
 * @param imageUrls - 图片信息数组 { url: 图片地址, filename: zip 内文件名 }
 * @param zipName   - 下载的 zip 文件名
 */
async function downloadImagesAsZip(
  imageUrls: { url: string; filename: string }[],
  zipName: string = 'images.zip',
) {
  const zip = new JSZip();
  const folder = zip.folder('images')!;

  // 1. 并发 fetch 所有图片为 Blob，放入 zip
  const results = await Promise.allSettled(
    imageUrls.map(async ({ url, filename }) => {
      const res = await fetch(url, { mode: 'cors' });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const blob = await res.blob();
      folder.file(filename, blob);
    }),
  );

  // 2. 统计失败数量（可选）
  const failedCount = results.filter((r) => r.status === 'rejected').length;
  if (failedCount > 0) {
    console.warn(`${failedCount} 张图片下载失败，已跳过`);
  }

  // 3. 生成 zip Blob
  const zipBlob = await zip.generateAsync({ type: 'blob' });

  // 4. 触发浏览器下载（等效于 file-saver 的 saveAs）
  const blobUrl = URL.createObjectURL(zipBlob);
  const link = document.createElement('a');
  link.href = blobUrl;
  link.download = zipName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(blobUrl); // 释放内存
}