浏览器右键“另存为”仅保存HTML文档本身，不包含CSS、JS、图片等外部资源，导致样式错乱、功能失效；Chrome/Edge默认保存为“Webpage, Complete”但受限于同域和静态资源，Firefox默认仅保存HTML；curl/wget适用于获取原始HTML源码，Puppeteer可保存JS渲染后的完整DOM。
直接右键“另存为”保存的 .html 文件，往往不包含 CSS、JS、图片等外部资源，打开后样式错乱、功能失效——这不是下载失败，而是默认行为只保存 HTML 文档本身。
浏览器右键“另存为”保存的是什么
这个操作实际调用的是浏览器的 Save Page As 功能，保存类型由浏览器决定：
- Chrome / Edge 默认保存为
Webpage, Complete（含子文件夹），但仅对同域、非动态生成的资源有效；遇到 CDN 图片、内联 SVG、fetch加载的内容，仍会丢失 - Firefox 保存为
Web Page, HTML Only是默认选项，连 CSS 链接都不会下载 - 所有浏览器都无法保存通过 JavaScript 动态插入的 DOM 节点（比如 React/Vue 渲染后的页面）
用 curl 或 wget 命令行下载原始 HTML 源码
适用于想获取服务端返回的“未经 JS 渲染”的原始 HTML，比如爬虫分析、SEO 检查、备案存档。
关键点：绕过浏览器渲染，直取 HTTP 响应体。
立即学习“前端免费学习笔记（深入）”；
推荐用 wget，它比 curl 更适合处理 HTML 中的相对链接重写：
wget --no-parent --convert-links --page-requisites --no-clobber --restrict-file-names=windows https://example.com/page.html
-
--page-requisites下载 CSS/JS/图片等依赖资源 -
--convert-links重写本地链接，让离线打开时能正确跳转 -
--no-parent防止 wget 顺着../跑到上层目录 - 注意：如果目标页面使用了 CSP 或 Referer 校验，可能需要加
--header="Referer: https://example.com/"
用 Puppeteer 保存完整渲染后的 HTML（含动态内容）
当页面严重依赖 JS（如单页应用、懒加载列表、登录后内容），必须用无头浏览器执行 JS 后再保存。
核心逻辑：启动 Chromium → 访问 URL → 等待网络空闲 + 可选等待特定元素 → 获取 document.documentElement.outerHTML → 写入文件。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'networkidle2' });
const html = await page.content();
require('fs').writeFileSync('page.html', html);
await browser.close();
})();
-
networkidle2表示连续 500ms 最多 2 个网络连接活跃，比domcontentloaded更稳妥 - 若页面有登录态，需提前用
page.setUserAgent()和page.setCookie()注入凭证 - 导出的 HTML 不自动下载资源，如需离线可用
page.pdf()或配合page.screenshot()+page.coverage分析资源再补抓
容易被忽略的关键细节
真正能“还原网页”的下载，从来不是单一动作：
- 静态 HTML + 外链资源 ≠ 页面真实表现（字体、Web Worker、Service Worker 不会被保存）
- 保存下来的
.html文件若含blob:或data:链接，这些内容已内联或生成于内存，无法通过 wget/puppeteer 直接落地为文件 - HTTPS 页面中混有 HTTP 资源（mixed content），浏览器会阻止加载，但 wget/puppeteer 默认不拦截，导致保存的 HTML 在离线时看似完整、实则缺内容
- 部分网站通过
document.write或eval()注入关键 HTML 片段，这类代码在 Puppeteer 中默认执行，但若禁用了 JS（page.setJavaScriptEnabled(false)），就会彻底丢失
