Ctrl+S 保存的 HTML 不含 AJAX 内容，因其仅保存服务端返回的初始 HTML；动态内容由 JS 运行后插入 DOM，需用 document.documentElement.outerHTML 手动导出完整页面。
直接保存 HTML 文件，得不到 AJAX 加载后的内容——浏览器里看到的“完整页面”，和右键「查看网页源代码」看到的，根本不是一回事。
为什么 Ctrl+S 保存的 HTML 没有 AJAX 加载的内容？
因为 fetch() 或 XMLHttpRequest 是在页面加载完成后、由 JavaScript 动态发起的，它们获取的数据插入到 DOM 中，但不会写回原始 HTML 文件。你保存的是初始 HTML（也就是服务端吐出来的那一份），不包含任何 JS 运行后追加的结构。
- 右键 →「查看网页源代码」：显示服务器返回的原始 HTML，
fetch()还没执行 - 右键 →「检查」→ Elements 面板：显示当前实时 DOM 树，含所有 JS 插入的内容
-
document.documentElement.outerHTML能拿到含动态内容的完整 HTML 字符串，但只是内存里的快照，不自动落地为文件
用 document.documentElement.outerHTML 手动导出当前 DOM
这是最轻量、无需后端配合的方式，适合调试或临时存档。打开开发者工具 Console，粘贴运行：
function saveCurrentPage() {
const html = document.documentElement.outerHTML;
const blob = new Blob([html], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = Object.assign(document.createElement('a'), {
href: url,
download: 'page-with-ajax-content.html'
});
document.body.append(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
saveCurrentPage();
- 该脚本会把当前渲染完成的整页 HTML（含所有 AJAX 插入的节点）下载为本地文件
- 注意：内联
<script>和事件监听器会被保留，但依赖外部 JS/CSS 的功能在离线打开时可能失效 - 如果页面用了大量相对路径（如
src="js/app.js"），离线打开时资源会 404，建议先用 DevTools 的 Network 面板确认哪些资源已缓存或可替换为绝对 URL
服务端渲染（SSR）或预渲染才是可靠方案
想让保存的 HTML 原生就含异步内容，就得让这些内容在服务端拼好再返回——这不是前端能单方面解决的。
立即学习“前端免费学习笔记（深入）”；
- 静态站点生成器（如 Next.js、Nuxt、Hugo）可在构建时请求 API 并注入 HTML，输出纯静态文件
- Node.js 后端（Express/Koa）可在路由中
await fetch()外部接口，再把结果塞进模板里res.send(html) - 反向代理层（如 Nginx + Lua 或 Varnish）也能做边缘端合成，但复杂度高，一般用于 CDN 场景
单纯靠前端 AJAX + 保存 HTML，永远绕不开“内容只活在浏览器内存里”这个事实。真要交付可保存、可离线、SEO 友好的页面，得从服务端或构建流程入手。
