html5页面转pdf无原生快捷法，window.print()最轻量但依赖打印样式；jspdf+html2canvas生成位图pdf，文字不可选；服务端方案（如puppeteer）最可控但需部署或调用api。
HTML5 页面直接转 PDF 没有“原生快捷法”——浏览器不提供 window.print() 以外的标准化导出接口，所有“一键转PDF”都依赖外部工具或服务，且格式丢失、分页错乱、CSS 不兼容是常态。
用 window.print() + 浏览器“另存为 PDF”最轻量，但只适合静态展示
这是唯一无需额外库、不发请求、纯前端可操作的方式，但本质是调用浏览器打印模块，效果取决于打印样式支持程度：
- 必须写
@media print规则来隐藏无关元素（如导航栏、按钮），否则会照搬渲染 -
background默认不打印，需加-webkit-print-color-adjust: exact;（仅 Chrome/Edge 有效） - Flex/Grid 在分页时容易断裂，
page-break-inside: avoid;对容器无效，得套div+break-inside: avoid; - 中文字体若未在系统安装，PDF 中可能回退成方块或默认英文字体
用 jsPDF + html2canvas 能截图式转 PDF，但不是真排版
这种组合把整个页面（或某 div）渲染成 Canvas 图片再塞进 PDF，适合内容固定、交互少、不需文本搜索/复制的场景：
-
html2canvas不执行 JS、不加载跨域图片、忽略transform和部分filter - 高分辨率截图（如
scale: 2）会导致 PDF 体积暴增，手机端易卡死 - 生成的 PDF 是位图，文字不可选、无法被屏幕阅读器识别、缩放后模糊
- 示例关键调用：
html2canvas(document.getElementById('content')).then(canvas => { new jsPDF().addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0); });
用服务端方案（如 Puppeteer / wkhtmltopdf）才真正可控，但要部署或调 API
这类工具基于真实浏览器引擎渲染 HTML，能正确处理 CSS 分页、字体嵌入、SVG、JavaScript 动态内容：
立即学习“前端免费学习笔记（深入）”；
- Puppeteer（Node.js）可精确控制视口、等待网络空闲、注入自定义打印 CSS，例如：
page.pdf({ format: 'A4', printBackground: true }) - wkhtmltopdf 轻量但已停止维护，对 Flex/Grid 和现代 CSS 支持差，中文需手动指定
--outline-depth和字体路径 - 若不想搭服务，可用现成 API（如 DocRaptor、PDFShift），但涉及敏感数据时注意传输合规性
- 注意：服务端渲染无法访问前端 localStorage 或用户登录态，需提前把必要数据序列化传入 HTML
真正难的不是“怎么转”，而是“怎么让转出来的 PDF 和你看到的 HTML 一致”——CSS 打印媒体查询、字体子集、分页断点、动态内容冻结时机，这些细节没一个能靠“速学教程”绕过去。
