HTML本身不能直接生成ZIP，必须用JSZip+FileSaver前端方案或Node.js+archiver后端方案；浏览器“另存为”仅输出文件夹，非ZIP归档。
HTML源码本身不能直接“压缩保存”，必须通过工具生成ZIP包；浏览器右键“另存为”只生成文件夹，不是ZIP；真正能一键导出ZIP的，只有前端JS方案或后端接口。
用 JSZip 在浏览器里打包成 ZIP
这是最常用、无需部署的纯前端方式，适合作品集导出、代码快照等轻量场景。
- 必须引入两个库：
jszip.min.js和FileSaver.min.js，缺一不可 - 每个文件要显式调用
zip.file("name.html", content)，不能传 DOM 对象，得是字符串 - 生成 blob 必须用
zip.generateAsync({type:"blob"})，generate()已废弃且不兼容现代浏览器 - 中文文件名会乱码：需在
saveAs(blob, "项目.zip")中传原始名称，并确保content是 UTF-8 字符串（不是 Blob 或 ArrayBuffer） - 大文件（>10MB）容易卡死或内存溢出，别硬扛——改用后端方案
用 Node.js 后端生成 ZIP 并下载
适合需要读取本地目录、合并资源、处理大文件或校验路径的正式项目。
- 推荐用
archiver库，比原生zlib更稳定，支持流式写入 - 响应头必须设全：
Content-Type: application/zip和Content-Disposition: attachment; filename="export.zip" - 别用
res.download()直接传路径——它只支持磁盘已有文件，不支持动态 ZIP 流 - 如果接口接受用户传入路径（如
?dir=assets），必须做路径白名单校验，否则可能触发../etc/passwd类型的路径遍历漏洞
为什么“另存为 → 网页,全部”不是 ZIP？
浏览器这个功能本质是“复制+本地组织”，它生成的是一个 page.html 文件 + 一个 page_files 文件夹，两者靠相对路径关联。这不是归档格式，不能双击打开，也不能发给他人一键解压使用。
立即学习“前端免费学习笔记（深入）”；
- 你看到的“完整网页”只是浏览器自动维护的文件结构，不是 ZIP
- 想转成 ZIP，必须手动选中这两个项，用系统压缩工具打包——但这样会丢失 HTML 内部的路径引用逻辑，图片可能显示异常
- 若页面用了动态加载（如 Vue/React 渲染后的内容），
另存为保存的是初始 HTML，不含 JS 插入的 DOM，此时连“完整”都谈不上
真正可靠的打包，核心在于“内容可重现 + 路径可解析”。前端 JSZip 适合小而确定的输出，后端 archiver 适合可控环境下的自动化流程。别指望浏览器菜单里点一下就出来 ZIP——那不是设计目标，只是常见误解。
