正确做法是用 fetch 发 post 请求获取 blob 流，再通过 url.createobjecturl 创建临时链接触发下载；后端必须设置 content-type 为 application/zip、content-disposition 为 attachment; filename="xxx.zip"，且响应体为合法 zip 二进制数据。
点击按钮后不跳转页面，只触发后端打包逻辑
浏览器里点按钮直接下载 ZIP，本质是前端发请求、后端生成压缩包并返回二进制流。关键不是“用什么标签”，而是避免 window.location 或 <a href></a> 触发同步导航——那会中断 JS 执行，也拦不住浏览器自动打开新页或弹 404。
正确做法是用 fetch 发 POST 请求，手动读取响应体为 Blob，再用 URL.createObjectURL 创建临时链接触发下载：
document.getElementById('downloadBtn').addEventListener('click', async () => {
try {
const res = await fetch('/api/export-zip', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ ids: [101, 102, 105] })
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const blob = await res.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'data-export-2024.zip';
a.click();
URL.revokeObjectURL(url); // 立即释放，否则内存泄漏
} catch (err) {
console.error('下载失败:', err.message);
}
});
后端必须设对 Content-Disposition 和 MIME 类型
哪怕前端 fetch 成功，后端没配好响应头，浏览器照样不会弹保存框——它可能把 ZIP 当文本渲染，或直接丢弃二进制流。
必须同时满足三点：
-
Content-Type设为application/zip（不能是text/plain或漏设） -
Content-Disposition设为attachment; filename="xxx.zip"（注意attachment，不是inline） - 响应体确实是合法 ZIP 二进制数据（Node.js 用
res.send(buffer)，Python Flask 用send_file(..., mimetype='application/zip')）
漏掉任意一项，a.click() 都可能静默失败，控制台无报错，用户只看到按钮点了没反应。
大文件导出时防止前端卡死或超时
数据库查几万条记录再 zip，后端处理可能要 10–30 秒。默认 fetch 没超时控制，前端会长时间白屏，用户反复点击，后端还可能被并发压垮。
稳妥做法分两步：先发轻量请求获取任务 ID，再轮询状态，最后下载：
- 点击按钮 → 调
/api/export-queue，后端异步启动打包，返回{ task_id: "t_abc123" } - 前端用
setInterval每 2 秒调/api/export-status?t=t_abc123，直到返回{ status: "ready", download_url: "/api/export-download?t=t_abc123" } - 最后 fetch
download_url下载 ZIP（此时已是就绪态，秒级响应）
这样既避免长请求阻塞 UI，又能让用户看到进度提示（比如按钮变“打包中…”），而不是干等。
SQLite / MySQL 直接读取 BLOB 字段时的编码陷阱
如果数据库里存的是文件原始二进制（比如 PDF、图片），导出 ZIP 时需原样写入，不能当字符串处理。常见错误是用 JSON.stringify 包裹 BLOB 字段，或用 toString() 强转——这会破坏二进制结构，解压后文件打不开。
Node.js 从 MySQL 读 BLOB 正确方式：
// ❌ 错误：当成字符串拼接
const row = await db.query('SELECT content FROM files WHERE id = ?', [id]);
const badBuf = Buffer.from(row[0].content); // 如果 content 是 string，已损坏
// ✅ 正确：确保 driver 返回 Buffer
const row = await db.query('SELECT content FROM files WHERE id = ?', [id], {
typeCast: (field, next) => {
if (field.type === 'TINY' && field.length > 10000) return null; // 示例：让 BLOB 字段保持 Buffer
}
});
const goodBuf = row[0].content; // 直接是 Buffer 实例
Python Flask + SQLAlchemy 同理：查字段时显式指定 sa.LargeBinary 类型，别用 String 接。
真正麻烦的不是写代码，是确认每层链路都按二进制透传：数据库驱动 → 后端框架响应体 → HTTP 协议传输 → 浏览器 Blob 构造。中间任何一环误转编码，ZIP 就废了，但错误不报在控制台，只表现为“下载的 zip 打不开”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
