wkhtmltopdf是最稳本地HTML转PDF方案,基于QtWebkit,兼容CSS、中文及分页;需指定--page-size和--encoding UTF-8,路径用相对或绝对路径;Chrome Print to PDF适合预览;playwright/puppeteer适用于JS渲染页面。

用 wkhtmltopdf 命令行直接转 PDF 最稳
本地 HTML 转 PDF,wkhtmltopdf 是目前最成熟、兼容性最好的方案,尤其对含 CSS 布局、中文、分页的页面支持远超浏览器原生“另存为 PDF”。它本质是调用 QtWebkit 渲染引擎,行为接近旧版 Chrome,但更可控。
安装后(macOS 用 brew install wkhtmltopdf,Windows 下需下载安装包并配好 PATH),直接运行:
wkhtmltopdf --page-size A4 --margin-top 20 --margin-bottom 20 --encoding UTF-8 index.html output.pdf
-
--page-size必须显式指定,否则默认是无边距的“无界纸张”,PDF 会切掉内容 -
--encoding UTF-8对含中文的 HTML 是刚需,漏掉会导致乱码或空白页 - 路径必须是本地绝对路径或当前目录下的相对路径;不支持
file://协议前缀,直接写./page.html就行 - 如果 HTML 引用了本地 CSS/JS/图片,确保路径是相对当前 HTML 文件的,或用
--enable-local-file-access(有安全风险,仅调试用)
Chrome DevTools 的 Print to PDF 适合快速预览
开发阶段想秒出 PDF 看效果?打开 Chrome,F12 → Ctrl+Shift+P(Win)或 Cmd+Shift+P(Mac)→ 输入 print → 选 Print to PDF。它走的是 Chromium 当前渲染结果,能反映最新样式和 JS 动态内容。
- 注意:CSS 中的
@media print会被生效,若没定义,就按屏幕样式转,可能排版错乱 - 页边距、页眉页脚由 Chrome 打印设置控制,不是 HTML 决定的;导出前务必点开“更多设置”调好
- 无法批量处理,也不支持命令行集成,纯手动操作,不适合自动化流程
用 pdfmake 或 jsPDF 在浏览器里生成 PDF 是伪“本地转”
这类前端库不是把现有 HTML 渲染成 PDF,而是用 JS 描述 PDF 结构(比如 pdfmake 的 content: [{ text: 'Hello' }]),再生成二进制流。它们不解析 HTML/CSS,也不还原布局,所以不能当作“HTML → PDF”的通用转换器。
立即学习“前端免费学习笔记(深入)”;
- 如果你的 HTML 是简单结构(如报表、单页通知),且愿意重写成 JSON 描述,
pdfmake输出质量高、体积小 -
jsPDF+html2canvas组合是常见误区:它只是把 DOM 截图成 PNG 再塞进 PDF,文字不可选、缩放模糊、长页面易截断 - 所有纯前端方案都无法处理跨域资源、
iframe、CSS Grid 复杂布局,也不支持分页控制
playwright 和 puppeteer 适合需要 JS 执行的场景
当 HTML 依赖 JS 渲染(比如 Vue/React 页面、动态图表、登录后内容),wkhtmltopdf 会失败,此时得用基于 Chromium 的自动化工具。推荐 playwright(更现代、多浏览器支持),示例代码:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('file:///path/to/index.html', { waitUntil: 'networkidle' });
await page.pdf({ path: 'output.pdf', format: 'A4' });
await browser.close();
})();
-
file://路径必须用三个斜杠:file:///(Unix)或file://C:/(Windows) -
waitUntil: 'networkidle'比'load'更稳妥,避免 JS 异步请求未完成就截图 - 生成的 PDF 默认无页眉页脚,如需添加,得用
print方法配合displayHeaderFooter: true - 首次运行会自动下载 Chromium,约 150MB,别误以为卡死
真正难的不是转 PDF,而是让 HTML 本身适配 PDF:避免浮动、慎用 position: fixed、用 page-break-inside: avoid 控制分页——这些细节比选哪个工具更重要。











