HTML截图不是页面导出，它仅捕获当前视口渲染快照，不保留结构、语义、交互及未加载资源；html2canvas因非真实渲染引擎常失真；puppeteer截图更准但仍为静态图像；真正HTML导出需序列化DOM或服务端生成。
HTML截图不是页面导出，它只捕获当前渲染快照
HTML截图（比如用 puppeteer.screenshot() 或 html2canvas）本质是把浏览器当前视口或指定元素“拍张照片”，输出为 PNG/JPEG。它不保留 HTML 结构、语义、交互能力，也不处理未加载资源（如异步 JS 渲染的内容、跨域图片、字体加载失败时的 fallback）、CSS 变量未计算值、或媒体查询生效状态。
如果你需要可编辑、可搜索、可无障碍访问、支持打印样式或后续动态操作的“导出”，截图完全无法替代真正的 HTML 导出 —— 后者应直接序列化 DOM 或服务端重生成完整 HTML 文件。
html2canvas 为什么经常截不出真实样式？
html2canvas 在客户端纯 JS 模拟渲染，不走真实浏览器排版引擎，所以很多 CSS 特性它根本不支持：
-
transform、filter、clip-path等现代属性常被忽略或渲染错位 - 外部字体（尤其是 Google Fonts）若未显式预加载或
@font-face未就绪，文字会回退成系统默认字体甚至空白 -
position: fixed元素可能错位到视口左上角，因为它的坐标系基于滚动前的 DOM 布局 - CSS 自定义属性（
--primary-color）不会被计算，需提前用getComputedStyle注入内联 style
验证方式：在调用 html2canvas(element) 前，先 console.log(getComputedStyle(element).color)，看是否拿到预期值 —— 如果是空或初始值，截图大概率不对。
立即学习“前端免费学习笔记（深入）”；
puppeteer 截图能当导出用吗？
可以比 html2canvas 更接近真实渲染，但仍有关键限制：
- 必须确保页面完全稳定：等
networkidle0+ 手动await page.waitForFunction检查关键节点存在，否则截到 loading 状态 - 默认只截视口（
fullPage: false），要全页需设fullPage: true，但长表格/无限滚动内容仍可能漏掉未渲染部分 - 截图是静态二进制数据，无法还原为可编辑 HTML；想“导出为 HTML”，还得额外做 DOM 序列化，比如
await page.content()获取源 HTML，或await page.evaluate(() => document.documentElement.outerHTML) - 如果页面依赖客户端 JS 初始化（如 React/Vue SSR 后 hydrate），需确认
page.waitForSelector等到 hydration 完成后的标记元素
真正导出 HTML 页面该怎么做？
分场景选方案，核心原则：导出动作应在 DOM 稳定、数据就绪、样式已应用后触发。
- 纯静态页面：直接
document.documentElement.outerHTML+Blob+URL.createObjectURL下载，但注意移除开发用 script（如webpackHMR）、内联data:图片过大时可能超 URL 长度限制 - 含动态数据的页面：优先服务端生成（如 Next.js
getStaticProps或后端模板），避免客户端拼接导致 SEO 和一致性问题 - 需要保留样式：用
document.styleSheets遍历提取 CSS 文本，或注入完整<link rel="stylesheet">，但注意 CORS 阻止读取外链样式表 —— 此时得提前内联关键 CSS - 带 Canvas/SVG 的可视化：截图是唯一可行方案，但要明确告知用户“此为图像副本，非原始 HTML”
最易被忽略的一点：导出 HTML 若含相对路径（./assets/logo.png），在本地双击打开时必然 404 —— 必须转为绝对路径、base64 内联，或配套导出整个文件夹结构。
