下载ZIP文件提示「压缩ZIP文件夹无效」问题求助

开发者阿泽

2026-7-31

问题排查与修复

核心问题1：MIME类型不匹配

你在下载ZIP文件时，给Blob设置的MIME类型是application/json，但ZIP文件对应的正确MIME类型应该是application/zip（或application/x-zip-compressed）。错误的MIME类型会导致系统无法正确识别文件格式，触发「压缩ZIP文件夹无效」的提示。

核心问题2：API返回数据未正确处理

如果你的API返回的是ZIP二进制数据，请求时必须设置responseType: 'blob'，否则浏览器会把二进制数据当成文本解析，导致文件损坏。如果没设置这一项，即使后续转成Blob，文件也已经是损坏状态了。

修复后的代码示例

export const DownloadJsonReport = (data: BlobPart, type: string, fileName: string) => {
  const report = document.createElement('a');
  const blob = new Blob([data], { type });
  const url = URL.createObjectURL(blob);
  report.href = url;
  report.setAttribute('download', fileName);
  report.click();
  // 释放URL对象，避免内存泄漏
  URL.revokeObjectURL(url);
};

const DownloadActionClick = useCallback(async () => {
  // API请求时根据类型设置responseType
  const response = await fetch('/your-api-endpoint', {
    method: 'GET',
    responseType: type === 'zip' ? 'blob' : 'text'
  });
  const data = type === 'zip' ? await response.blob() : await response.text();

  if (type === 'csv') {
    DownloadJsonReport(
      data as BlobPart,
      'text/csv;charset=utf-8;',
      `${id}report.csv`,
    );
  } else {
    DownloadJsonReport(
      data as BlobPart,
      'application/zip', // 修正为ZIP对应的MIME类型
      `${id}report.zip`,
    );
  }
}, [type, id]);