Elysia Tools
导航
Document Tools
使用浏览器渲染HTML/CSS生成精确页眉页脚的PDF
详情
此工具使用无头浏览器渲染HTML/CSS，适合高精度排版。
页眉页脚：
<span class="pageNumber"></span> 与 <span class="totalPages"></span> 显示页码打印设置：
@page 与 @media print（启用“优先CSS页面尺寸”）执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
HTML转PDF（精确排版）工具利用无头浏览器渲染技术，将HTML与CSS内容精准转换为高质量PDF文档，支持自定义页眉页脚、页面边距及打印样式，非常适合生成报表、发票或专业文档。
背景
需要将系统导出的HTML格式月报转换为正式的PDF文件，要求包含页码和公司页脚。
问题
普通打印功能无法自动添加页码，且排版容易错乱。
如何使用
将HTML报表粘贴至输入框，在页脚模板中填入页码代码，并设置20mm边距。
pageSize: A4, marginTop: 20, marginBottom: 20, footerTemplate: '<div style="font-size:10px; text-align:center;">第 <span class="pageNumber"></span> 页 / 共 <span class="totalPages"></span> 页</div>'结果
生成了一份排版整齐、带有自动页码和统一页脚的专业PDF月报。
背景
需要将网页版产品介绍手册转换为PDF，以便发送给客户。
问题
网页背景色在默认打印下丢失，且页面尺寸不匹配。
如何使用
上传HTML内容，勾选“打印背景”，并设置“优先CSS页面尺寸”以适配手册的特殊排版。
printBackground: true, preferCssPageSize: true, scale: 1.0结果
PDF完美保留了网页的视觉风格，且页面尺寸完全符合手册设计要求。
在页眉或页脚模板中，使用 `<span class="pageNumber"></span>` 表示当前页码，使用 `<span class="totalPages"></span>` 表示总页数。
支持。您可以直接在CSS区域编写 `@media print` 规则，或勾选“优先CSS页面尺寸”以应用 `@page` 规则。
请在设置中勾选“打印背景”选项，这样CSS中定义的背景色和背景图片将会被渲染到PDF中。
工具支持 A4、Letter、Legal 和 A5 等常用标准页面尺寸。
您可以调整“等待条件”选项（如设置为 networkidle0），或增加“额外等待时间”以确保页面资源完全加载后再生成PDF。