HTML直接生成PDF可行但非无损，浏览器打印另存为PDF存在自动化缺失、样式失效、分页不可控、字体回退及JS内容截断等问题；推荐Playwright服务端导出，其PDF API更稳定、字体支持更好、加载判断更准确。
HTML 直接生成 PDF 是可行的，但“直接”不等于“无损”或“零配置”——浏览器打印另存为 PDF 本质是调用系统级渲染引擎做快照，它能快速产出 PDF，但对布局控制、分页、字体嵌入、CSS 支持有限，不适合需要精确排版的场景。
为什么 window.print() + 手动另存为 PDF 不可靠
这是最轻量的方法，但实际落地时问题集中：
- 用户必须手动点击「另存为 PDF」，无法自动化，不适合后台导出或批量处理
-
@media print中的样式常被忽略，比如display: none失效、背景色/图默认不打印（Chrome 需勾选「背景图形」） - 分页完全由浏览器自动断行，
page-break-before/break-inside: avoid在不同浏览器中兼容性差，Safari 尤其弱 - 中文字体若未在系统安装或未通过
@font-face显式加载，PDF 中会回退成方块或默认英文字体 - JavaScript 渲染的内容（如 React/Vue 动态表格）可能在触发
print()时还未完成绘制，导致 PDF 空白或截断
服务端生成 PDF：推荐 Playwright 而非 Puppeteer
两者都能启动 Chromium 实例并截图或导出 PDF，但 Playwright 对 PDF 导出的稳定性、跨平台字体支持和 API 更友好：
-
page.pdf()默认启用printBackground: true，无需额外设置即可保留 CSS 背景 - 支持显式指定
fontFamily和format（如'A4'），且对中文路径下本地字体加载更鲁棒 - Playwright 的
waitForLoadState('networkidle')比 Puppeteer 的waitForTimeout更准确，避免因异步资源未加载完就导出空白页 - 示例关键代码：
await page.goto('http://localhost:3000/report', { waitUntil: 'networkidle' });
await page.pdf({
path: 'report.pdf',
format: 'A4',
printBackground: true,
margin: { top: '20px', right: '15px', bottom: '20px', left: '15px' }
});
前端 JS 库导出 PDF：慎用 jsPDF + html2canvas
这套组合看似“纯前端”，实则隐患多：
立即学习“前端免费学习笔记（深入）”；
-
html2canvas是截图逻辑，会丢失所有可选文本、超链接、表单交互，且对transform、filter、SVG 滤镜支持极差 - 中英文混排时，
html2canvas常把文字渲染成模糊位图，缩放后锯齿严重；PDF 文件体积也远大于语义化导出 -
jsPDF自身不解析 HTML，依赖html2canvas输出<canvas>后再转 PDF，无法实现分页控制、页眉页脚自动重复等基础功能 - 若页面含 iframe 或跨域资源，
html2canvas直接报SecurityError，无法绕过
真正可控的 HTML→PDF 流程，要么用 Playwright/PDFKit 等服务端方案统一渲染，要么接受浏览器打印的“够用就行”。想让页眉带动态日期、表格跨页不断行、字体 100% 一致——这些细节，几乎注定要离开“另存为”那一下点击。
