最稳的HTML简历下载方式是读取document.documentElement.outerHTML构造Blob并触发下载，而非使用a[download]或前端生成PDF；需注意可访问性、跨浏览器兼容及CSP等边界问题。
点击按钮直接触发浏览器下载 HTML 文件
HTML 简历本身是网页，不是传统 PDF 或 DOCX，所以「下载简历」本质是让浏览器把当前页面 HTML 源码保存为 .html 文件。不能靠 window.location.href 跳转，也不能用 fetch 重新请求自身（可能跨域或带 query 参数导致内容不一致）。
最稳的方式是读取 document.documentElement.outerHTML，构造 Blob，再用 URL.createObjectURL 触发下载：
const downloadResume = () => {
const html = document.documentElement.outerHTML;
const blob = new Blob([html], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'my-resume.html';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
};
把这个函数绑定到按钮的 onclick 或事件监听器里就行。注意：不要在 iframe 或 sandboxed 环境中运行，否则 outerHTML 可能被截断或报错。
为什么不用 a[href] + download 属性？
很多人试过写 @#@#@#@#@#@#@#@#@#@0，但这条路走不通——它只对同源静态文件有效。如果你简历部署在 Vercel、GitHub Pages 或本地 file:// 协议下，会遇到：
-
file://协议下，download属性被浏览器忽略（Chrome/Firefox 均如此） - 部署在 GitHub Pages 时，
href="index.html"下载的是原始未渲染 HTML（不含 JS 动态插入的内容） - 如果简历用了 CSS-in-JS、动态主题切换或数据填充，静态 HTML 文件根本没这些内容
所以必须在运行时抓取「此刻真实渲染出的完整 HTML 字符串」，而不是引用某个磁盘路径。
导出成 PDF 更实用？别直接在前端硬刚
用户真正想要的往往不是 .html，而是能打印、转发、投递的 .pdf。但纯前端生成 PDF（比如用 jsPDF + html2canvas）问题很多：
- CSS Grid / Flex 布局经常错位，
@media print规则不生效 - 中文字体几乎必然丢失（除非手动 embed Base64 字体，体积暴涨）
- 页边距、分页、背景图控制极难，调试成本远高于后端生成
更现实的做法：提供「打印 → 保存为 PDF」引导（加个醒目的提示文案），或者服务端生成（如用 Puppeteer API）。前端一键下载，就老老实实下 HTML；需要 PDF，交给用户自己用浏览器打印功能——它对现代 CSS 支持比任何 JS 库都好。
按钮样式和可访问性别漏掉
下载按钮不是装饰品。几个容易被忽略的点：
- 加
role="button"和tabindex="0"，确保键盘用户能聚焦并回车触发 - 用
aria-label="下载我的 HTML 简历文件"，避免屏幕阅读器只读「下载」二字 - 禁用状态要显式处理：比如正在生成 Blob 时设
disabled，防止重复点击产生多个临时 URL - 不要用
写死内联 JS，优先用addEventListener，方便后续加埋点或统一错误监控
复杂点不在逻辑，而在边界：本地双击打开、HTTPS 页面、CSP 策略严格、甚至 Safari 对 Blob URL 的 30 秒自动释放——这些都会让下载失败静默发生。上线前务必在 Chrome/Firefox/Safari 的本地文件和真实域名下各测一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
