React中使用JSZip和file-saver打包URL图片失败求助

尝试使用JSZip和file-saver从远程URL获取图片Blob并打包为zip，但生成的压缩包内无图片。相关代码如下：

JS代码 #

async function downloadResourcesOnClickTest() {
  const zip = new JSZip();

  const siteImageData = [{
      fileUrl: 'https://saseuwdevattachmentapi.blob.core.windows.net/generic-final-container/1017f445-6833-4ca5-bb4d-eec994a4c622.jpg',
      fileName: 'test_1.png'
    },
    {
      fileUrl: 'https://saseuwdevattachmentapi.blob.core.windows.net/generic-files-container/c47136a4-d323-408b-b82b-3367226272a0.jpg',
      fileName: 'test_2.png'
    }
  ];


  // Download images and add to zip file
  for (const imageData of siteImageData) {
    const response = await fetch(imageData.fileUrl);
    const blob = await response.blob();

    zip.file(imageData.fileName, blob);
  }

  // Generate and download zip file
  zip.generateAsync({
    type: 'blob'
  }).then(function(blob) {
    saveAs(blob, 'images.zip');
  });
}

HTML代码 #

<Button variant="outlined" onClick={downloadResourcesOnClickTest}>
                DOWNLOAD PHOTOS
              </Button>

问题原因分析 #

1. CORS跨域拦截：Azure Blob存储未配置CORS规则时，浏览器会阻止前端直接通过fetch请求资源，导致无法获取有效Blob。
2. 未校验请求状态：代码未检查fetch响应是否成功，若请求返回403/404等错误，仍会将无效Blob添加到zip，最终生成空压缩包。
3. 文件扩展名不匹配：原文件为JPG格式，但文件名指定为PNG，虽不影响打包，但会导致图片后续无法正常打开。

解决方案 #

1. 修复代码，添加请求校验与错误处理 #

优化后的代码会校验请求状态、并行处理请求提升效率，并修正扩展名匹配问题：

async function downloadResourcesOnClickTest() {
  const zip = new JSZip();
  const siteImageData = [{
      fileUrl: 'https://saseuwdevattachmentapi.blob.core.windows.net/generic-final-container/1017f445-6833-4ca5-bb4d-eec994a4c622.jpg',
      fileName: 'test_1.jpg'
    },
    {
      fileUrl: 'https://saseuwdevattachmentapi.blob.core.windows.net/generic-files-container/c47136a4-d323-408b-b82b-3367226272a0.jpg',
      fileName: 'test_2.jpg'
    }
  ];

  try {
    // 并行处理所有图片请求
    await Promise.all(siteImageData.map(async (imageData) => {
      const response = await fetch(imageData.fileUrl);
      // 校验请求是否成功
      if (!response.ok) {
        throw new Error(`获取图片失败：${imageData.fileUrl}，状态码：${response.status}`);
      }
      const blob = await response.blob();
      zip.file(imageData.fileName, blob);
    }));

    // 生成并下载zip
    const zipBlob = await zip.generateAsync({ type: 'blob' });
    saveAs(zipBlob, 'images.zip');
  } catch (error) {
    console.error('打包失败:', error);
    alert('下载图片失败，请检查控制台日志');
  }
}

2. 配置Azure Blob存储的CORS规则 #

如果是跨域问题，需在Azure Portal中配置Blob存储的CORS：

• 进入Blob存储账户 → 资源共享 (CORS)
• 添加规则：
  • 允许的来源：测试环境可填*，生产环境指定你的域名
  • 允许的方法：GET, OPTIONS
  • 允许的标头：*
  • 公开的标头：*
  • 最大年龄：3600

3. 后端代理替代方案（无法修改CORS时） #

若无法配置Azure的CORS规则，可通过后端接口代理图片请求：前端调用后端接口，后端请求Blob存储并返回图片数据，前端从后端获取Blob后再打包。

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