浏览器打印最省事但样式受限，wkhtmltopdf服务端生成能力强但需处理字体和JS，pdfmake组合前端生成稳定但有布局限制，第三方软件易出错且存隐私风险。
用浏览器打印功能最省事，但别指望它能保留动态样式
打开 html 文件后按 ctrl+p（windows）或 cmd+p（mac），选“另存为 pdf”就能出文件——这是最快、零依赖的方式。但它本质是截图式渲染：javascript 渲染后的 dom 不会重排，css 中的 @media print 以外的样式大概率失效，position: fixed 元素可能错位，分页也常把表格硬生生劈开。
- 适合：临时存档单页静态报告、内部草稿、内容简单且无交互的页面
- 不适合：含 Vue/React 动态组件、带滚动加载的数据看板、需要精确分页或页眉页脚的合同类文档
- 小技巧：在 HTML 里加一段
@media print { * { -webkit-print-color-adjust: exact; } }能强制保留背景色，Chrome 下有效
wkhtmltopdf 仍是服务端生成的「事实标准」，但得避开字体和 JS 执行陷阱
它底层调用 WebKit 渲染引擎，能真实执行 JS、支持 CSS3、分页控制精细，命令行一句 wkhtmltopdf input.html output.pdf 就能跑通。但默认不嵌入中文字体，中文会显示方块；异步请求（如 fetch）若没等完就转，PDF 里就是空白。
- 必须做：安装时勾选「添加到系统 PATH」，终端输入
wkhtmltopdf -V能返回版本号才算成功 - 中文必加参数：
--encoding utf-8 --outline-depth 3 --enable-local-file-access --font-family "SimSun" - JS 等待建议：用
--javascript-delay 2000（毫秒），或更稳妥地改用--run-script注入判断逻辑 - 注意：它不支持 ES6+ 新语法，Webpack 打包后的代码需降级到 ES5 再喂给它
前端直接生成 PDF？pdfmake + html-to-pdfmake 组合最稳，但别碰 html2canvas
pdfmake 是纯 JS 的 PDF 构建库，html-to-pdfmake 负责把 HTML 字符串解析成它的 content 格式。两者配合，不依赖后端、不发请求、中文正常、体积小。而 html2canvas + jsPDF 方案看似简单，实际会把整个页面强行画成一张大图——缩放失真、文本不可选、长页面内存爆炸，Chrome 浏览器卡死是常态。
- 正确写法示例：
const htmlContent = `<h2>订单详情</h2><table><tr><td>编号</td></tr></table>`; const pdfContent = htmlToPdfmake(htmlContent); pdfMake.createPdf({ content: pdfContent }).download('order.pdf'); - 限制：不支持
iframe、video、复杂 CSS Grid 布局；伪元素（::before）内容不会被解析 - 调试技巧：先用
console.log(pdfContent)看生成的 JSON 结构，比对着 HTML 检查层级是否塌陷
别信「一键转换」软件，福昕/Adobe Acrobat 的网页抓取容易漏子
福昕阅读器拖入 HTML 文件点「转 PDF」，或 Acrobat 用「工具 → 创建 PDF → 网页」，表面方便，实则暗坑密集：它会自动抓取当前 HTML 引用的 CSS/JS 文件，但若路径是相对路径（如 ./css/style.css）且 HTML 未放在 web server 下运行，资源全部 404；Acrobat 更会擅自截断「超出视口」的内容，懒加载图片直接消失。
- 唯一可靠场景：本地 HTML 已用
python -m http.server 8000启服务，且所有资源路径均为绝对 URL（http://localhost:8000/css/style.css） - 如果必须用这类软件，请先导出为「HTML 单文件（.mht）」再转，能打包所有依赖
- 敏感数据坚决不用：这些工具会把 HTML 发到厂商服务器处理，隐私条款里白纸黑字写着「可能用于模型训练」
字体嵌入、JS 执行时机、资源路径解析——这三个点卡住 90% 的失败案例，调的时候先盯死它们。
立即学习“前端免费学习笔记（深入）”；
