最可靠导出方式是blob+url.createobjecturl，因其兼容所有现代浏览器、可精确控制文件名与mime类型、支持动态内容且避免data:url的安全限制和乱码问题。
直接用 Blob + URL.createObjectURL 是最可靠、兼容性最好的前端导出方式，比 data: URL 或手动复制粘贴更可控，尤其适合动态生成的 HTML 内容（比如编辑器输出、运行时渲染结果）。
为什么不能直接用 location.href = "data:text/html," + encodeURIComponent(html)
这个写法在 Chrome/Firefox 新版里会触发下载失败或被拦截：Chrome 会弹出空白页后立即关闭；Firefox 可能只打开不下载；Safari 完全不支持 data: URL 的自动下载。根本原因是浏览器出于安全限制，禁止通过导航方式触发非同源、无用户交互的下载行为。
关键点：
-
data:URL 不是真实文件，无法指定文件名，download属性在a标签上对它无效 - 编码后 URL 长度受限（尤其含中文或大量样式时易截断）
- 没有显式用户点击动作，现代浏览器会静默阻止
Blob 导出 HTML 文件的完整流程
核心是构造一个带正确 MIME 类型和编码的 Blob，再通过 a 标签模拟点击下载。注意几个易错环节：
-
type必须设为"text/html;charset=utf-8"，漏掉charset=utf-8会导致中文乱码 -
a.download的值必须是纯文件名（如"report.html"），不能含路径，否则 Safari/部分 Edge 版本会忽略 - 必须在
document.body中临时挂载a元素并调用.click()，否则 Firefox 不触发下载 - 调用完
URL.revokeObjectURL(url)是必须的，否则内存泄漏（尤其频繁导出时）
最小可用示例：
const htmlContent = document.documentElement.outerHTML;
const fullHtml = `${htmlContent}`;
const blob = new Blob([fullHtml], { type: "text/html;charset=utf-8" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "exported.html";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
导出内容含外部资源（CSS/JS）怎么办？
如果 HTML 里引用了 CDN 上的 Tailwind、Bootstrap 或远程脚本，离线打开会失效。解决思路不是“打包所有资源”，而是“内联关键依赖”：
- 把
<link rel="stylesheet">的 CSS 内容抓取后转成<style></style>块（需服务端代理或已知 CDN 版本） - 把
<script src="..."></script>的 JS 内容替换为<script>...</script>（仅适用于小体积、无跨域限制的脚本） - 图片等二进制资源无法用纯前端内联，建议提前转为
data:URL（用fetch+blobToBase64）或提示用户手动保存资源文件夹 - 绝对不要尝试用正则替换 HTML 中的
src/href—— 会破坏结构、引入 XSS 风险
真正麻烦的不是导出动作本身，而是确保导出后的 HTML 在离线环境下能还原原始效果。外链资源、动态插入的 DOM、未序列化的状态（比如富文本编辑器的光标位置）都会丢失。导出前最好先做一次 document.documentElement.outerHTML 快照，而不是拼接字符串 —— 后者容易漏掉运行时注入的内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
