HTML无法直接生成ZIP，需JS前端库（如JSZip）或后端（如Node.js+archiver）实现；注意中文乱码、路径注入、Safari/iOS兼容性及大文件处理等边界问题。
HTML 本身不支持 ZIP 打包，得靠 JS 或后端
浏览器里的 HTML 文件只是静态页面，没有文件系统权限，更没法生成 .zip。所谓“导出压缩”，实际是用 JavaScript 调用前端压缩库（如 JSZip），或把数据发给后端（如 Node.js、Python）生成 ZIP 再下载。
常见错误现象：点击按钮没反应、下载的 zip 打不开、中文文件名乱码。
- 前端方案适合小文件（总大小
- 后端方案更稳，但需部署接口，且要处理
Content-Disposition响应头 -
JSZip默认不支持中文路径，得配合FileSaver.js和 UTF-8 编码补丁
用 JSZip 在浏览器里打包多个 HTML/CSS/JS 文件
这是最常用的纯前端 ZIP 方案，适用于作品集导出、代码快照等场景。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 引入
JSZip和file-saver：<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>，再加<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script> - 每个文件用
zip.file("name.html", content, {binary: true})添加；文本内容建议传字符串，别传 DOM 对象 - 生成 blob 必须用
zip.generateAsync({type:"blob"})，不能用已废弃的generate() - 中文文件名需在
saveAs()时传入原始名称，且服务端若参与中转，必须设Content-Type: application/zip和Content-Disposition: attachment; filename*=UTF-8''xxx.zip
const zip = new JSZip();
zip.file("index.html", "<!DOCTYPE html><html>...</html>");
zip.file("style.css", "body { margin: 0; }");
zip.generateAsync({type:"blob"}).then(blob => saveAs(blob, "my-project.zip"));
Node.js 后端生成 ZIP 并响应下载（Express 示例）
适合需要读取本地项目目录、合并资源、或处理大文件的场景。前端只负责触发请求，ZIP 由服务端生成。
关键点：
- 用
archiver库比原生zlib更可靠，支持流式写入 - 响应头必须设
res.set("Content-Type", "application/zip")和res.set("Content-Disposition", 'attachment; filename="export.zip"') - 别用
res.download()直接传路径——它不支持动态生成的 ZIP 流 - 路径注入风险：如果用户能控制打包路径（如
?dir=../../etc），必须校验并限制根目录
const archiver = require('archiver');
app.get('/export', (req, res) => {
res.set({ "Content-Type": "application/zip", "Content-Disposition": 'attachment; filename="export.zip"' });
const archive = archiver('zip');
archive.pipe(res);
archive.directory('./public/', false);
archive.finalize();
});
移动端和 Safari 下 ZIP 下载失败的典型原因
不是所有浏览器都支持 FileSaver.saveAs() 的自动触发，尤其 iOS Safari 对 blob: URL 和 a[download] 有严格限制。
容易踩的坑：
- Safari 不支持直接
saveAs(blob)，得用URL.createObjectURL()创建临时链接再模拟点击 - iOS 微信内置浏览器会拦截非用户手势触发的下载，按钮必须是真实
<button onclick="..."></button>，不能靠setTimeout延迟调用 - Android Chrome 对大于 100MB 的 ZIP 可能静默失败，无报错，需加
archive.on("error", ...)捕获 - 别在
zip.generateAsync()后直接URL.revokeObjectURL()——得等saveAs完成回调里再释放
