如何在JavaScript中将Readable流保存为Zip文件？

你当前代码的核心问题是把整个Response对象直接塞进了Blob，而不是提取响应体的流数据，所以下载的才是显示[object Response]的文本文件。结合Safari的兼容性特点，我们可以这样修正：

一、最简单的解决方案：直接利用Response的blob()方法 #

fetch返回的Response对象本身就提供了blob()方法，它会自动把响应体的ReadableStream转换为Blob，这也是最兼容Safari的方式：

getDownload(id, downloadName)
  .then(response => {
    // 先校验响应状态，避免处理错误响应
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    // 将响应体的ReadableStream转换为Blob
    return response.blob();
  })
  .then(rawBlob => {
    // 明确指定Blob的MIME类型为zip，帮助Safari正确识别文件类型
    const zipBlob = new Blob([rawBlob], { type: 'application/zip' });
    
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(zipBlob);
    downloadLink.download = downloadName; // 使用传入的自定义文件名
    
    // Safari对动态创建的a标签点击有特殊处理，建议手动触发鼠标事件
    document.body.appendChild(downloadLink);
    const clickEvent = new MouseEvent('click');
    downloadLink.dispatchEvent(clickEvent);
    
    // 延迟清理资源，确保下载操作完成后释放ObjectURL
    setTimeout(() => {
      URL.revokeObjectURL(downloadLink.href);
      downloadLink.remove();
    }, 100);
  })
  .catch(error => {
    console.error('下载过程出错：', error);
    // 这里可以添加用户友好的错误提示，比如弹窗告知下载失败
  });

二、如果需要手动处理ReadableStream（比如超大文件） #

如果你因为文件过大，不想一次性转换为Blob，需要手动处理ReadableStream的话，可以写一个工具函数把流逐块转换为Blob，再进行下载：

// 工具函数：将ReadableStream转换为Blob
async function streamToBlob(stream, mimeType) {
  const reader = stream.getReader();
  const chunkArray = [];
  let readResult;

  // 逐块读取流数据
  while (!(readResult = await reader.read()).done) {
    chunkArray.push(readResult.value);
  }

  // 将所有块合并为Blob，并指定MIME类型
  return new Blob(chunkArray, { type: mimeType });
}

// 使用示例
getDownload(id, downloadName)
  .then(response => {
    if (!response.ok) {
      throw new Error(`请求异常：${response.status}`);
    }
    // 传入响应体的stream和zip的MIME类型
    return streamToBlob(response.body, 'application/zip');
  })
  .then(zipBlob => {
    // 后续下载逻辑和第一种方案一致
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(zipBlob);
    downloadLink.download = downloadName;
    
    document.body.appendChild(downloadLink);
    downloadLink.click();
    
    setTimeout(() => {
      URL.revokeObjectURL(downloadLink.href);
      downloadLink.remove();
    }, 100);
  })
  .catch(error => console.error('下载失败：', error));

Safari兼容性注意事项 #

• 必须指定正确的MIME类型：一定要把Blob的类型设为application/zip，否则Safari可能会把文件识别为通用二进制文件，甚至当成文本文件处理。
• 避免使用target="_blank"：Safari的弹出窗口拦截机制可能会阻止这种方式的下载，直接触发a标签的点击事件更可靠。
• 及时清理ObjectURL：URL.createObjectURL会占用浏览器内存，一定要在下载完成后调用URL.revokeObjectURL释放资源，尤其在Safari中长时间运行的页面更要注意。
• 超大文件的特殊处理：如果是GB级的超大文件，上面的Blob方式可能会占用过多内存，这时候可以考虑使用FileSystem Access API（Safari 15.4+支持）直接写入文件，但兼容性会受限，需要根据你的用户群体权衡。

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