最可靠方案是浏览器原生打印（devtools→ctrl/cmd+p→另存为pdf）或puppeteer服务端渲染；html2canvas+jspdf因截图原理存在字体、样式、跨域及模糊等多重缺陷需慎用。
直接用 print() 或浏览器「另存为 PDF」最可靠，第三方库生成的 PDF 常见字体丢失、CSS 错位、分页失控——不是代码写得不对，是 HTML→PDF 本质就是渲染链重走一遍，而多数库只模拟了部分渲染逻辑。
浏览器 DevTools 打印预览导出（适合静态页面）
这是零依赖、效果最接近所见即所得的方式。Chrome / Edge / Safari 均支持，关键在于触发前让页面进入「打印就绪」状态：
- 确保关键样式加
@media print规则，比如隐藏.no-print元素、显式设置page-break-inside: avoid防止表格断行 - 避免用
position: fixed或transform布局，这些在打印模式下常被忽略或错位 - 中文字体必须用
@font-face显式加载并声明font-display: swap，否则导出 PDF 时大概率回退成方块 - 打开 DevTools →
Ctrl+P（Win）或Cmd+P（Mac）→ 左下角选「另存为 PDF」→ 确保「背景图形」勾选，否则background-color和background-image不会输出
用 Puppeteer 服务端生成（适合动态/批量场景）
Node.js 环境下最可控的选择，本质是启动无头 Chrome 渲染再截图 PDF，但默认参数极易翻车：
-
format: 'A4'比width/height更稳定；若需自定义尺寸，必须用paperWidth/paperHeight（单位 mm），不能混用 px - 务必设
printBackground: true，否则 CSS 背景全丢 - 中文字体问题：Linux 服务器需提前安装
fonts-wqy-zenhei或noto-cjk，并在启动时传入args: ['--font-render-hinting=none'] - 等待时机很重要：别只等
DOMContentLoaded，要用page.waitForFunction('window.isReady === true')这类信号，确保 JS 渲染完成
jsPDF + html2canvas 的坑（慎用！）
这个组合看似轻量，实则是「把网页截图再拼成 PDF」，实际效果取决于 canvas 渲染兼容性：
-
html2canvas不支持transform、filter、svg filter，遇到就白屏或截空 - 跨域图片（如 CDN 上的
<img>）会触发 canvas 污染，必须服务端代理或改用allowTaint: true, useCORS: true（但部分浏览器仍拒绝） - 长页面滚动截取靠
scrollY模拟，但html2canvas对position: sticky和 flex 容器内滚动极不友好，常截出重复或漏掉区块 - 生成的 PDF 是位图，放大后模糊，且文件体积比真实 PDF 大 3–5 倍
真正难的从来不是「怎么转」，而是「怎么让页眉页脚对齐」「表格跨页不断行」「中文字体不糊」「页码自动续编」——这些都需要在 HTML 结构、CSS 分页控制、以及生成工具链之间反复对齐，没有银弹。浏览器原生打印路径最省心，Puppeteer 最可控，其余方案建议先拿一个真实页面跑通再评估。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
