JSZip本地正常但IIS服务器生成Zip文件损坏问题求助

可能的原因及解决方案 #

1. IIS未正确处理二进制文件的传输编码 #

本地开发代理可能自动适配了二进制文件传输逻辑，但IIS默认对部分文件类型会以文本编码传输，直接破坏二进制内容结构。

解决办法：
在web.config中添加对应文件类型的MIME映射，强制以二进制方式传输：

<system.webServer>
  <staticContent>
    <!-- 根据实际使用的文件类型补充配置 -->
    <mimeMap fileExtension=".pdf" mimeType="application/pdf" />
    <mimeMap fileExtension=".docx" mimeType="application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
    <mimeMap fileExtension=".xlsx" mimeType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
    <mimeMap fileExtension=".jpg" mimeType="image/jpeg" />
    <mimeMap fileExtension=".png" mimeType="image/png" />
  </staticContent>
</system.webServer>

2. JSZipUtils获取二进制内容的编码问题 #

JSZipUtils的getBinaryContent在服务器环境下可能未正确识别二进制响应，将文件内容当作字符串解析，导致原始二进制数据损坏。

解决办法：
替换JSZipUtils为原生fetchAPI，明确指定获取arraybuffer类型响应，确保拿到原始二进制数据：

const zip = new JSZip();

if (this.urlList.length === 0) {
  alert('Please select files..');
  return;
}

// 包装所有下载任务为Promise
const downloadTasks = this.urlList.map(url => {
  const filename = url.split('/').pop() || 'unknown-file';
  return fetch(url, { responseType: 'arraybuffer' })
    .then(response => {
      if (!response.ok) throw new Error(`Failed to load ${url}, status: ${response.status}`);
      return response.arrayBuffer();
    })
    .then(data => {
      zip.file(filename, data, { binary: true });
    });
});

// 等待所有文件下载完成后生成压缩包
Promise.all(downloadTasks)
  .then(() => zip.generateAsync({ type: 'blob' }))
  .then(content => {
    const objectUrl = URL.createObjectURL(content);
    const link = document.createElement('a');
    link.download = 'zipfiles.zip';
    link.href = objectUrl;
    link.click();
    URL.revokeObjectURL(objectUrl); // 释放内存
  })
  .catch(err => {
    console.error('Zip generation failed:', err);
    alert('Failed to create zip file.');
  });

3. 异步计数逻辑导致压缩包不完整 #

原代码手动维护count变量判断下载完成状态，异步请求的执行顺序可能导致计数提前触发，部分文件未添加就生成压缩包，造成zip损坏。

解决办法：
使用Promise.all统一管理所有异步下载任务（如上述代码所示），确保所有文件都成功添加到zip后再执行生成操作，彻底避免计数错误。

4. IIS路由规则或文件路径错误 #

原代码通过replace('http://......', '')处理路径，可能导致部署到IIS后路径无效，下载的是404页面等错误内容而非目标文件，最终生成的zip包含无效数据。

解决办法：

1. 在浏览器中直接访问urlList中的路径，确认能正常下载文件；
2. 检查路径是否为IIS部署目录下的有效相对路径，调整路径拼接逻辑；
3. 确认Angular的SPA路由规则不会拦截静态文件请求，正确的web.config重写规则应为：

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

5. IIS的CORS配置不完整 #

即使配置了跨域源，若未允许GET请求或正确设置响应头，浏览器可能无法正常获取文件内容，导致zip内容缺失或损坏。

解决办法：
确保web.config中的CORS配置完整：

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" /> <!-- 建议替换为你的前端域名 -->
      <add name="Access-Control-Allow-Methods" value="GET, OPTIONS" />
      <add name="Access-Control-Allow-Headers" value="Content-Type" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

若未安装IIS CORS模块，需先通过服务器管理器安装，再进行配置。

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