浏览器ctrl+p保存为pdf最可靠，因其直接调用浏览器渲染引擎，完整保留css、字体、图片及js动态内容；务必在打印对话框选“save as pdf”并勾选“背景图形”，且需等页面完全加载后再操作。
直接用浏览器打印功能保存为 PDF 是最稳、最省事的方案，其他方式要么有兼容性风险，要么要额外装工具或写代码。
Ctrl+P 保存为 PDF 为什么最可靠
这不是“凑合能用”，而是目前唯一能完整复现页面渲染结果的方式——它调用的是浏览器自己的排版引擎，CSS、字体、图片、JS 渲染后的内容都能保留。很多第三方库（比如 html2canvas + jsPDF）本质是截图，中文字体模糊、position: fixed 错位、分页断裂都是常态，不是你代码写错了，是原理上就做不到所见即所得。
关键操作点：
- 必须在打印对话框里选
Save as PDF，不是Microsoft Print to PDF或系统虚拟打印机——后者绕过浏览器渲染，效果差一截 - 勾选
背景图形，否则所有background-color和background-image全部丢失 - 动态内容（如表格、图表）要等完全加载完再按
Ctrl+P，否则导出的是空白或半截内容 - 本地
.html文件可直接拖进浏览器打开，无需起本地服务；.mhtml文件 Chrome/Edge 原生支持，双击即开
wkhtmltopdf 批量处理时要注意什么
它适合一次转多个文件或需要命令行集成的场景，但默认行为和浏览器不一致，容易导出失败或样式错乱。
常见翻车点：
-
wkhtmltopdf默认不加载本地 CSS/JS 资源，路径含file://时需加--enable-local-file-access参数 - 中文字体必须提前安装到系统，并在 CSS 中用
@font-face显式声明，否则输出全是方块 - 不要混用
width/height和paperWidth/paperHeight，单位必须统一为mm，A4比数值更稳 - 批量转换多个 HTML 文件时，命令格式是
wkhtmltopdf a.html b.html c.pdf，最后一个是输出文件名，前面所有都是输入
Puppeteer 服务端生成 PDF 的硬约束
Node.js 环境下最可控的方案，但配置稍重，不适合单次手动操作。
几个不能跳过的设置：
-
printBackground: true必须显式设为true，否则所有背景色/图全丢 - 避免用
page.pdf({ format: 'A4' })，改用page.pdf({ paperWidth: 210, paperHeight: 297 })（单位 mm），否则某些版本会忽略format - 页面内含 iframe 时，需等
iframe.contentDocument.readyState === 'complete'再触发pdf()，否则子框架内容为空 - 本地文件路径要用
file://协议，且 Puppeteer 启动时得加--no-sandbox --disable-setuid-sandbox才能读取
哪些情况千万别用 html2canvas + jsPDF
这个组合在前端轻量生成 PDF 场景里常被推荐，但它本质是 Canvas 截图 + 转 PDF，对真实排版毫无控制力。
以下情形基本不可用：
- 页面含中文字体且未用
@font-face加载（Canvas 截图会回退成系统默认字体，大概率是方块） - 用了
transform、filter、clip-path等高级 CSS 特性（Canvas 不支持或渲染异常） - 内容高度超过单页，需要自动分页（
html2canvas只能截当前视口） - 页面资源跨域（比如图片来自 CDN 且没配
CORS头），Canvas 会因安全策略报错
真正需要客户端生成 PDF 时，优先考虑让后端用 Puppeteer 渲染，前端只负责发起请求和下载——把渲染逻辑从浏览器里移出去，才是稳定的关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
