HTML转PDF需先通过渲染引擎解析HTML/CSS/JS生成渲染树，完成布局与绘制后输出为PDF。1. 渲染引擎将网页内容转化为可视布局；2. 主流工具如Puppeteer调用无头Chrome实现高精度转换，wkhtmltopdf基于旧版WebKit兼容性较差，jsPDF+html2canvas通过截图方式生成但丢失文本特性；3. 转换时需处理分页、CSS打印样式、字体嵌入等问题；4. 实际流程包括启动无头浏览器、加载页面、等待资源就绪后调用PDF导出功能，最终生成可打印的PDF文档。整个过程依赖“渲染→排版→输出”三阶段，核心在于具备完整网页渲染能力的环境支持。
HTML转PDF的过程本质上是将网页内容（HTML、CSS、JavaScript等）渲染成静态的页面布局，再将这些布局输出为PDF文档。这个过程不是浏览器直接“保存为PDF”的简单操作，而是通过特定工具或引擎解析、渲染、排版后生成PDF文件。下面从核心机制和常见实现方式来说明。
1. 渲染引擎的作用
HTML不能直接变成PDF，必须先被解析和渲染。这一步依赖于浏览器内核或无头浏览器：
- HTML和CSS被解析成DOM树和CSSOM树，合并为渲染树
- JavaScript可能动态修改内容或样式
- 布局计算（Layout）确定每个元素的位置和大小
- 绘制（Paint）生成像素图像
只有完成渲染，才能知道页面最终长什么样，这是生成PDF的前提。
2. 常见转换工具及运行机制
不同的工具使用不同方式调用渲染能力，以下是主流方案：
立即学习“前端免费学习笔记（深入）”；
● 使用 Puppeteer（基于 Chrome DevTools Protocol）Puppeteer 控制一个无头 Chrome 或 Chromium 实例，加载网页并触发PDF导出：
- 启动无头浏览器
- 打开页面，等待资源加载完成
- 执行 page.pdf() 方法，Chrome 内部调用打印功能生成PDF
- 返回或保存PDF文件
这种方式最接近真实浏览器效果，支持现代CSS、字体、分页控制等。
● 使用 wkhtmltopdf（基于 WebKit）这是一个较早的命令行工具，内置轻量级 WebKit 引擎：
- 解析HTML输入
- 使用旧版 WebKit 渲染页面
- 将渲染结果绘制成PDF
优点是部署简单，缺点是对现代前端框架支持较差，CSS兼容性有限。
● 使用 JavaScript 库如 jsPDF + html2canvas这类方案在浏览器端运行：
- html2canvas 将HTML元素“截图”为Canvas
- jsPDF 把Canvas图像插入PDF
局限在于无法保留文本可搜索性，排版精度低，不适合复杂文档。
3. 分页与样式处理
PDF是分页文档，而网页是连续滚动的，因此转换时需处理分页逻辑：
- 通过 CSS @page 和 break-inside/break-after 控制分页位置
- 设置页面尺寸、边距、方向（A4、Letter等）
- 字体嵌入：确保PDF中文字体正确显示，避免乱码
高质量的转换需要精心设计打印样式表（print media CSS）。
4. 实际运行流程示例
以 Puppeteer 为例，基本流程如下：
- Node.js 环境运行脚本
- 启动 Chromium 实例（无界面模式）
- 导航到指定URL或设置HTML内容
- 等待网络空闲或执行自定义等待逻辑
- 调用 pdf() 方法，传入格式参数（页边距、格式、页眉页脚等）
- Chromium 的打印模块生成PDF数据流
- 返回PDF Buffer 或写入文件
基本上就这些。整个过程依赖渲染 → 排版 → 输出三个阶段，关键是有一个可靠的渲染环境。选择哪种方式取决于对兼容性、性能和部署复杂度的要求。
