17370845950

本文详解 react 调用 node.js 接口生成并下载 zip 文件时常见的“损坏归档”问题，核心在于服务端未正确处理 archiver 流的生命周期与响应时机，需避免写入本地文件再读取，而应直接将压缩流管道至 http 响应。

在前后端分离架构中，通过 POST 请求触发服务端 ZIP 打包并下载是一个高频需求。但如案例所示，尽管服务端本地生成的 ex.zip 文件完整可用，前端下载的却总是损坏（如报错“invalid zip file”或解压失败），根本原因在于：Node.js 服务端错误地混合了文件写入与 HTTP 响应逻辑，且未等待压缩流完成就提前结束响应。

❌ 错误写法解析

原服务端代码存在三处关键问题：

1. 异步流未等待完成：archive.finalize() 返回的是一个 Promise-like 流，但未监听 close 或 end 事件，也未使用 async/await；
2. 冗余本地写入：先用 fs.createWriteStream 将 ZIP 写入磁盘（ex.zip），再试图用 res.download() 发送另一个路径（/home/user/Js）——路径不匹配且绕过流式传输；
3. 响应时机失控：res.download() 在流尚未写入完成时即被调用，导致响应体为空或截断。

✅ 正确实现：流式直传（推荐）

服务端应跳过本地文件存储，直接将 archiver 流管道（.pipe()）到 Express 的 res 对象，并设置正确的响应头：

const archiver = require("archiver");
const express = require("express");
const cors = require("cors");

const app = express();
app.use(cors());

app.post("/download", (req, res) => {
  // 设置响应头：告知浏览器这是附件，且指定文件名
  res.attachment("ex_new.zip");

  // 创建 ZIP 归档实例
  const archive = archiver("zip", {
    zlib: { level: 9 } // 可选：启用最高压缩率
  });

  // 捕获归档错误（如路径不存在）
  archive.on("error", (err) => {
    console.error("Archiver error:", err);
    res.status(500).send({ error: "Failed to generate archive" });
  });

  // 监听归档完成事件，确保流彻底结束
  archive.on("end", () => {
    console.log("Archive written successfully.");
  });

  // 将归档流直接管道至 HTTP 响应
  archive.pipe(res);

  // 添加目录（确保 'output' 目录存在且有读取权限）
  archive.directory("output", false); // false 表示不包含外层目录名

  // 显式触发归档结束（必须调用）
  archive.finalize();
});

app.listen(5000, () => console.log("Server started on http://localhost:5000"));

✅ 前端保持简洁可靠

您现有的 React fetch + blob + URL.createObjectURL 方案完全正确，无需修改：

function test() {
  fetch("http://localhost:5000/download", {
    method: "POST",
  })
    .then((res) => {
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return res.blob();
    })
    .then((blob) => {
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "ex_new.zip";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    })
    .catch((err) => console.error("Download failed:", err));
}

⚠️ 关键注意事项

• 路径权限：确保 Node.js 进程对 output/ 目录有读取权限，否则 archive.directory() 会静默跳过或报错；
• 错误处理：务必监听 archive.on("error")，否则压缩过程异常（如文件被占用）会导致响应挂起或返回空内容；
• 大文件优化：若 output/ 包含大量文件，建议添加 archive.on("progress", ...) 日志，并考虑前端增加加载状态；
• CORS 配置：当前已用 cors() 中间件，但生产环境建议显式配置 origin 和 credentials；
• 不要混用 res.download() 与流式传输：res.download() 适用于已存在的静态文件；流式 ZIP 必须用 res.attachment() + .pipe(res)。

遵循上述方案，即可实现高效、可靠、零临时文件的 ZIP 下载，彻底解决“前端下载损坏归档”的顽疾。