右键“另存为”常失效，因React/Vue等框架动态渲染内容，源码仅含脚本；view-source为空或禁用JS后内容消失即属客户端渲染，应通过DevTools复制outerHTML或用Puppeteer获取完整DOM。
浏览器右键“另存为”为什么经常失效
很多网页用现代框架（比如 React、Vue）动态渲染内容，右键保存只能存下空壳 HTML，实际数据根本没写进源码里。这时候 document.body.innerHTML 看起来有内容，但 view-source: 里却只有几行脚本——说明 DOM 是运行时拼的，不是服务端吐的。
- 优先检查是否能直接访问
view-source:https://xxx，如果打不开或内容极少，就别指望“另存为”能救你 - 禁用 JavaScript 后刷新页面，如果内容全没了，那基本确定是纯客户端渲染，得换方法
- 有些网站加了
X-Frame-Options或Content-Security-Policy，会阻止 iframe 嵌入或脚本执行，影响保存逻辑
用浏览器开发者工具手动复制完整 DOM
这是最通用、不依赖网络权限的方法，适合保存单页应用当前状态。核心是把此刻渲染完的真实 DOM 树拷出来，而不是原始 HTML。
- 按
F12打开 DevTools，切到Elements面板 - 右键
节点 →Copy→Copy outerHTML（注意不是“Copy element”，那个只复制选中节点） - 粘贴到文本编辑器，第一行加上
，保存为 <code>xxx.html - 如果页面用了相对路径的 CSS/JS，离线打开可能样式错乱；可配合
Network面板把关键资源下载下来，改用本地路径引用
curl + headless Chrome 自动化保存（含 JS 渲染）
要批量或定时保存，就得让浏览器真正跑一遍 JS。curl 直接请求只拿原始 HTML，必须借助无头浏览器驱动。
- 用 Puppeteer（Node.js）比 Selenium 轻量，启动快：
page.setContent()不行，得用page.goto(url, { waitUntil: 'networkidle0' })确保 JS 执行完 - 别用
page.content()获取 HTML——它不包含动态插入的<style></style>或内联样式；应该用await page.evaluate(() => document.documentElement.outerHTML) - 记得设
args: ['--no-sandbox', '--disable-setuid-sandbox']，否则 Linux 服务器上常因权限失败 - 超时时间至少设 30s：
page.goto(..., { timeout: 30000 })，否则电商首页这种带懒加载、埋点请求的页面容易截半
保存后打开空白或报错：三个高频原因
不是保存失败，而是保存下来的 HTML 在离线环境下跑不起来。问题几乎都出在资源链接和执行环境上。
立即学习“前端免费学习笔记（深入）”；
-
Mixed Content错误：页面混用了http和https资源，离线时浏览器直接屏蔽非安全请求 -
Failed to load module script：ESM 模块路径没改成本地相对路径，或者没加type="module"属性 - 字体图标或 SVG 显示为方块：
@font-face的url()还指向线上 CDN，得下载字体文件并修正路径 - 如果用了
localStorage或fetch初始化数据，离线打开时这些调用会报错甚至中断渲染，需要手动删掉或 mock
