本文详解 react 调用 node.js 服务生成并下载 zip 文件时常见的“损坏归档”问题，核心在于后端未正确处理 archiver 流的生命周期与响应管道，需避免写入磁盘再读取，而应直接流式响应。
在全栈开发中，前端触发 ZIP 打包下载是一个高频需求（如导出项目资源、批量报告等），但若后端未正确协调流式压缩与 HTTP 响应，极易导致客户端收到损坏的 ZIP 文件——尽管服务端本地生成的 ZIP 可正常解压。你遇到的问题正源于此：Node 服务使用 archiver 创建 ZIP 流后，错误地将文件写入磁盘（fs.createWriteStream），又试图通过 res.download() 发送一个尚未写完或路径不匹配的文件（/home/user/Js 显然不是 ex.zip），造成响应体与 Content-Length 不一致，浏览器无法正确解析。
✅ 正确做法是：让 Archiver 直接将压缩流管道（pipe）到 Express 的响应对象 res，并配合 res.attachment() 设置响应头，实现零临时文件、实时流式传输。
✅ 修复后的 Node.js 后端代码（推荐）
const archiver = require("archiver");
const express = require("express");
const cors = require("cors");
const app = express();
app.use(cors());
app.use(express.json()); // 如需解析 JSON body，可添加
app.use(express.urlencoded({ extended: true })); // 如需解析表单数据
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.pipe(res);
// 添加目标目录（确保 'output' 存在且有读取权限）
archive.directory("output", false); // false 表示不包含根目录名
// 显式调用 finalize() 触发归档结束
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",
headers: { "Content-Type": "application/json" }, // 可选，但建议显式声明
})
.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));
}⚠️ 关键注意事项
- 禁止混合写磁盘与流响应：原代码中 fs.createWriteStream(...) 和 res.download(...) 并存是根本错误。二者互斥——要么流式直传（推荐），要么写盘后 fs.readFile 再 res.send()（低效且易出错）。
- 必须监听 archive.error：ZIP 压缩过程中可能因文件权限、路径不存在等失败，未捕获将导致请求挂起或 500 错误。
- 确保 output 目录可访问：Node 进程需有读取权限；若路径为相对路径，以 process.cwd() 为准，建议用 path.resolve(__dirname, "output") 明确路径。
- 跨域与预检：res.attachment() 依赖 Content-Disposition 头，CORS 中需显式允许：app.use(cors({ exposedHeaders: ["Content-Disposition"] }))（现代浏览器通常自动处理，但建议明确配置）。
- 大文件优化：生产环境可增加超时控制（req.setTimeout(300000)）和进度提示（前端监听 onprogress 需用 XMLHttpRequest 替代 fetch）。
通过以上调整，ZIP 文件将被实时、完整、高效地从服务端流式传输至浏览器，彻底解决“损坏归档”问题，同时提升系统健壮性与用户体验。
立即学习“前端免费学习笔记（深入）”；
