浏览器打印最省事但样式受限,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% 的失败案例,调的时候先盯死它们。
立即学习“前端免费学习笔记(深入)”;











