使用jszip打包图片URL为zip下载时仅存URL字符串如何解决？

你当前的代码直接将图片URL字符串作为内容传入zip.file()方法，JSZip会直接把字符串写入压缩包的文件中，所以你得到的压缩包里存的是URL文本，而非实际的图片二进制内容。你需要先通过URL请求到图片的二进制资源，再添加到压缩包内。

1. 封装工具方法，通过URL请求获取图片的Blob二进制数据
2. 批量请求所有图片，等待全部请求完成后再统一打包生成压缩包
3. 给压缩包内的文件添加正确的后缀名，避免解压后无法直接打开图片

首先确保你已经安装了对应依赖：

npm install jszip file-saver

修改你的逻辑代码如下：

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

// 工具函数：根据url获取图片二进制数据
const getImageBlob = async (url) => {
  const response = await fetch(url)
  if (!response.ok) {
    throw new Error(`图片 ${url} 加载失败，状态码：${response.status}`)
  }
  return await response.blob()
}

const handleDownload = async (photos) => {
  const zip = new JSZip()
  // 批量发起图片请求
  const photoPromiseList = photos.map(async (photo, index) => {
    const blob = await getImageBlob(photo)
    // 可根据URL提取原文件名和后缀，此处简化用序号加jpeg作为文件名
    const fileName = `${index}.jpeg`
    zip.file(fileName, blob)
  })
  // 等待所有图片都添加到压缩包
  await Promise.all(photoPromiseList)
  // 生成压缩包并触发下载
  const content = await zip.generateAsync({ type: 'blob' })
  saveAs(content, 'example.zip')
}

HTML部分无需修改，和你现有代码保持一致即可：

<button
  onClick={() => handleDownload(props.shortlisted)}
>
  Download
</button>

• 如果你的图片是第三方站点的资源，需要对应服务端配置跨域资源共享（CORS）规则，否则fetch请求会被浏览器拦截
• 可以通过正则匹配提取URL中的原文件名和后缀，替换示例中硬编码的.jpeg后缀，适配png、webp等多种格式的图片
• 如果需要打包的图片数量多、体积大，建议添加加载提示状态，避免用户重复点击触发多次下载

内容的提问来源于stack exchange，提问作者Cheang Wai Bin