html截图与页面导出本质不同：前者生成png/jpeg图片，后者保存可运行的html文件；混用会导致样式错乱、交互失效；可靠导出需补全base href、转绝对路径、内联关键资源。
HTML截图和页面导出本质不是同一类操作
HTML截图是把当前渲染结果“拍下来”，输出为图片（PNG/JPEG）；页面导出 HTML 是把源码或序列化后的 DOM 结构保存为 .html 文件，不包含渲染状态。两者目的、产物、技术路径完全不同——混淆它们会导致导出后样式错乱、交互失效、字体丢失等问题。
为什么用 html2canvas 截图在“页面导出”场景下常失败
html2canvas 依赖浏览器渲染快照，但它无法处理：跨域图片（CORS 阻止读取像素）、iframe 内容（默认跳过）、CSS 自定义字体（未显式加载为 @font-face 时回退成系统字体）、transform 或 filter 过度嵌套导致绘制截断。更关键的是：它生成的是 <canvas></canvas>，不是可复用的 HTML 文件。
- 若你实际需要的是“把当前页存成能发给同事、双击打开就还原的 HTML 文件”，别用
html2canvas - 若你只是想生成分享用的静态图，但误用了“导出 HTML”按钮，那得到的很可能是一个空壳
index.html+ 几个空css引用 - 部分低代码平台的“导出”按钮实际调用的是
document.documentElement.outerHTML，但没补全<base href>和内联资源，导致本地双击打开时路径全 404
真正可靠的页面导出 HTML 方案
核心原则：保留完整上下文，而非仅复制 DOM 字符串。推荐组合使用 DOMParser + 手动注入资源 + 重写相对路径：
- 用
document.documentElement.outerHTML获取结构，但必须用new DOMParser().parseFromString(..., 'text/html')重新解析，才能安全操作<link>、<script></script>节点 - 对所有
href和src属性，用new URL(attrValue, document.baseURI).href转为绝对路径，再替换为相对路径（如./assets/style.css） - CSS 中的
url()需正则提取并同样转绝对路径；字体文件、背景图等同理 - 内联
<style></style>和<script></script>建议保留，避免外部依赖；大 JS 库建议用type="module"+import方式预打包，而非直接抄<script src></script>
示例片段（简化版）：
const html = document.documentElement.outerHTML;
const doc = new DOMParser().parseFromString(html, 'text/html');
doc.querySelectorAll('link[rel="stylesheet"], script[src], img[src]').forEach(el => {
const attr = el.tagName === 'IMG' ? 'src' : 'href';
const abs = new URL(el[attr], document.baseURI).href;
el[attr] = './assets/' + encodeURIComponent(new URL(abs).pathname.split('/').pop());
});
截图与导出混用时最易忽略的细节
有些工具（比如 Puppeteer 的 page.screenshot() 和 page.content()）名字接近，但行为天差地别。更隐蔽的问题是：当你在 DevTools 里右键“Save as…”保存页面，Chrome 实际会同时下载 xxx.html + xxx_files/ 目录，而这个 _files 目录里的 CSS/JS/图片路径，是靠 HTML 里硬编码的 <base href="./xxx_files/"> 支撑的——漏掉这行，整个导出就废了。
另外，contenteditable 区域、Vue/React 组件的动态 class、getComputedStyle 计算出的样式，都不会出现在原始 HTML 字符串中，必须在导出前手动序列化或冻结状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
