做不到直接用 JavaScript 调用浏览器原生 API 将 HTML 转 PDF;必须借助第三方库(如 jsPDF+html2canvas)、原生 window.print() 或服务端无头浏览器(如 Puppeteer)。

直接在浏览器里用 JavaScript 调用工具把 HTML 转成 PDF,**做不到**。HTML 是静态标记语言,浏览器原生不提供 html2pdf 或 exportToPDF() 这类 API。所谓“调用工具”,实际是借助第三方库或服务,在客户端或服务端完成转换。
用 jsPDF + html2canvas 在前端生成 PDF
这是最常被搜索到的“前端转 PDF”方案,本质是:先截图 HTML 元素(html2canvas),再把图片塞进 PDF(jsPDF)。它不解析 CSS 布局,也不支持分页、页眉页脚、打印媒体查询等原生打印能力。
- 只适合简单内容,比如单页表单、卡片、海报类页面
-
position: fixed、transform、跨域图片、CSS Grid 复杂布局大概率渲染错乱 - 中文需手动引入字体,否则显示方块:
const doc = new jsPDF(); doc.setFont('simhei'); // 需提前 addFont - 不能触发浏览器原生的
@media print样式,得靠 JS 临时切换 class 模拟
用浏览器原生 window.print() 配合打印样式
这是最轻量、兼容性最好、语义最正的“HTML → PDF”路径:用户点打印 → 选“另存为 PDF”(Chrome / Edge / Safari 均支持)。它完全走浏览器渲染引擎,支持分页、@media print、break-before/after 等标准特性。
- 必须写好
@media printCSS,隐藏无关元素:@media print { .no-print { display: none; } body { font-size: 12pt; } } - 避免用
vh/vw单位,打印时视口概念失效;优先用cm、in、pt - 不要依赖 JS 动态插入内容——
window.print()不等待异步渲染,需确保 DOM 已就绪
后端调用如 Puppeteer 生成高保真 PDF
如果需要服务端稳定输出、支持完整 CSS、自动分页、页码、水印、权限控制,必须走 Node.js(或其他后端)+ 无头浏览器。Puppeteer 是目前最成熟的选择,底层调用 Chromium。
立即学习“前端免费学习笔记(深入)”;
- 能真实复现用户看到的页面,包括 JS 渲染后的内容、字体、动画帧静止态
- 支持 PDF 选项精细控制:
format: 'A4'、printBackground: true、margin: { top: '20px' } - 注意内存和并发:每个 PDF 生成会启动一个 Chromium 实例,高流量需池化或限流
- 部署时若用 Docker,需安装 Chromium 依赖:
--no-sandbox和--disable-setuid-sandbox常需同时加
真正难的不是“怎么转”,而是明确你要的是什么:是给用户一个可点击下载的 PDF 按钮?还是后台批量导出带水印的合同?前者用 window.print() 最省事也最可靠;后者绕不开 Puppeteer 或类似服务端方案。别被“一行代码转 PDF”的标题误导——所有看似简单的封装,背后都藏着渲染一致性、字体嵌入、分页逻辑这些硬骨头。











