Elysia Tools
导航
Document Tools
从 HTML+CSS 直接排版多页印刷级 PDF：@page 尺寸/页边距、章节页眉、页码计数器、裁切与套准标记、出血。
详情
一个 CSS 分页媒体排版器：给它一份自带打印设计的 CSS 的自包含 HTML 文档，它渲染出分页的印刷级 PDF——"从 HTML 得到 LaTeX 品质输出"的工作流，文档内无需任何 JavaScript。渲染器在 headless Chromium 中以打印媒体模式加载你的文件，打印时开启"页面尺寸取自 CSS"与背景打印。双引擎：默认使用开源（MIT）的 W3C 分页媒体 polyfill Paged.js，它补齐浏览器未实现的部分——裁切标记与套准标记（marks 属性）、出血、通过 @top-center 等页边距盒与 string-set 章节标题实现的动态页眉页脚、page/pages 计数器、命名页面、列表与脚注的生成内容——它把内容分块进固定页面盒并在裁切线外绘制标记。原生 Chromium 为兜底引擎：Chrome 131+ 原生实现 @page 尺寸、页边距与全部十六个页边距盒区域，已覆盖多数设计，但标记渲染有限，这正是 polyfill 存在的原因。选"自动"时只要内置 polyfill 可用即选 Paged.js，否则回退原生。实用说明：文档须自包含（内联样式、data-URI 图片），渲染器不做网络抓取；@page size 接受任意 CSS 长度或命名尺寸加 landscape；PDF 页面框会按出血量外扩，标记与出血落在裁切线外，可直接交付印厂；复杂文字按渲染主机的系统字体排版。报告元数据记录所用引擎与 Paged.js 排出的页数，付印前可先核对分页。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
工具使用指南
HTML/CSS 排版转 PDF 工具基于无头 Chromium 打印环境，支持通过 W3C 分页媒体规范将自包含的 HTML 与 CSS 转换为高精度印刷级 PDF。工具内置 Paged.js 与原生 Chromium 双排版引擎，支持自定义 @page 尺寸、出血位、裁切与套准标记、十六个页边距盒动态页眉页脚以及多页计数器，无需在页面中编写 JavaScript 即可实现专业书籍与册子排版。
背景
需要为客户印制一份 A5 尺寸的双章节产品小册子，印刷厂要求提供带有角线裁切标记和 6mm 出血的印刷级 PDF。
问题
传统浏览器直接打印无法生成标准裁切标记，也无法按章节自动切换页眉标题。
如何使用
上传编写好的小册子 HTML 文件，选择“Paged.js”排版引擎并提交转换。
@page { size: A5; margin: 20mm; bleed: 6mm; marks: crop cross; @top-center { content: string(chapter-title); } @bottom-center { content: counter(page); } }结果
成功输出页面框向外扩充 6mm 出血的 A5 PDF 文件，包含清晰的裁切标记、套准标记与动态页眉页码。
背景
文印管理员需要将内部系统生成的年度业绩 HTML 页面导出为标准 A4 报告，用于内部归档和常规打印。
问题
文档篇幅较长，需要严格的 A4 纵向分页与底端页码，无需裁切标记与多余出血扩展。
如何使用
上传自包含 HTML 报表文件，附加通用样式 CSS 文件，排版引擎选择“Chromium 原生 @page”。
@page { size: A4 portrait; margin: 15mm; @bottom-right { content: '第 ' counter(page) ' 页'; } }结果
直接由 Chromium 引擎快速生成无标记的标准 A4 PDF，保留背景表格样式与清晰的页脚计数。
渲染器不会发起外部网络请求，图片需转换为 data-URI 格式内嵌，文字则基于服务端的系统字体进行排版。
Paged.js 支持生成裁切与套准标记、出血扩展以及复杂的分页生成内容；原生引擎适用于常规尺寸和页边距盒，但标记渲染能力有限。
当启用了出血（bleed）或裁切标记时，PDF 页面框会自动向外扩展，确保裁切线与套准标记完整落在成品尺寸之外。
本排版工作流针对纯 HTML 与 CSS 分页设计，文档内无需且不依赖自定义 JavaScript 脚本。
可以在 CSS 中使用 @page :left 和 @page :right 伪类分别定义偶数页与奇数页的内外侧边距及页眉定位。