最稳导出PDF方式是Chrome浏览器直接打印为PDF；第三方库易出错，Playwright适合自动化批量导出，需注意CSS分页规则、字体嵌入及资源路径处理。
Chrome DevTools 打印功能导出 PDF 最稳
直接用 Chrome 浏览器打开 HTML 文件，按 Ctrl+P（Windows/Linux）或 Cmd+P（macOS），在打印对话框里把「目标打印机」选成 另存为 PDF，点保存就行。这是最可靠、兼容性最好、无需额外依赖的方式。
常见错误现象：用第三方库（比如某些 Python 的 pdfkit 或 weasyprint）渲染失败，页面布局错乱、中文不显示、CSS 不生效——本质是这些工具内置的渲染引擎太旧或配置没对齐真实浏览器行为。
使用场景：本地调试好的单页 HTML 报表、文档、简历，需要快速生成一份可分发的 PDF。
- 确保 HTML 里用的是相对路径或内联资源，避免导出后图片/CSS 丢失
- 如果用了
@media print，记得提前在 DevTools 的「Rendering」面板里勾上Emulate CSS media type: print预览效果 - 导出前建议先在 DevTools 的「Elements」面板里删掉
<script></script>标签（尤其是含动态加载逻辑的），防止 PDF 里出现空白或卡住
Python 用 playwright 自动化导出（适合批量/CI）
当你要写脚本批量转 PDF，或者集成进 CI 流程，playwright 比 selenium 更轻、更稳定，它调用的是真实 Chromium 内核，渲染结果和手动导出一致。
立即学习“前端免费学习笔记（深入）”；
性能影响：首次运行会自动下载浏览器（约 100MB），但后续复用快；内存占用比纯服务端渲染方案（如 weasyprint）略高，但准确率高得多。
- 安装：
pip install playwright，再执行playwright install chromium - 关键参数必须设
format="A4"和print_background=True，否则背景色、边距可能丢 - 如果 HTML 含本地
file://路径资源（比如<img src="data/logo.png" alt="怎么把html变成pdf_html文件转pdf保存方法【打印】" >），需用page.set_content(html, wait_until="networkidle")，不能直接goto("file:///...")，否则跨域报错
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page()
page.set_content(open("report.html").read(), wait_until="networkidle")
page.pdf(path="report.pdf", format="A4", print_background=True)
browser.close()
CSS 里哪些样式会让 PDF 导出失效
不是所有 CSS 都能在 PDF 导出时生效，尤其涉及分页、尺寸、动画的部分。Chrome 的 PDF 导出本质是「快照式渲染」，不执行 JS 动画，也不支持部分 Flex/Grid 断行逻辑。
容易踩的坑：用 position: fixed 做页眉页脚，结果 PDF 里只在第一页显示；用 vh/vw 单位，PDF 里高度算不准；transform: scale() 导致内容被裁切。
- 页眉页脚请用
@page+@top-center等标准 CSS Paged Media 规则，不是 HTML 元素 - 避免
display: grid嵌套过深，换用display: block+float或inline-block更稳妥 -
font-family必须声明系统已安装的字体（如"SimSun", "PingFang SC", sans-serif），Web 字体（WOFF）大概率不嵌入 PDF
为什么 html2canvas + jsPDF 不推荐用于正式导出
这套组合本质是「截图合成 PDF」，不是真正渲染 HTML。遇到复杂布局、跨域图片、CSS 变量、阴影、border-radius、SVG 混排时，失真率极高，且无法分页控制。
典型错误现象：Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement'（跨域图片）、文字模糊、表格列宽全崩、页码位置飘移。
- 仅适合简单卡片类内容（比如一张带二维码的凭证），且所有资源必须同源或已转
data:URL - 若坚持用，务必在
html2canvas里加useCORS: true, allowTaint: true，并预加载所有图片 - 不要指望它处理中文断行、
line-height继承、伪元素::before/::after
