# HTML/CSS 排版转 PDF

从 HTML+CSS 直接排版多页印刷级 PDF：@page 尺寸/页边距、章节页眉、页码计数器、裁切与套准标记、出血。

> 标准页面: https://elysiatools.com/zh/tools/pdf-typesetting-html-css-nojs-print

- **分类:** Document Tools

- **关键词:** html 转 pdf, css 分页媒体, pagedjs, page css, 裁切标记, 出血, 页边距盒, 动态页眉, 页码, 印刷级 pdf, 排版, 分页, 打印 css, chromium 打印

## 概述

一个 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 文档** (file)
- **附加 CSS（可选）** (file)
- **排版引擎** (select)

## 适用场景

- 需要使用 CSS @page 规则精确控制多页文档的纸张尺寸、边距与分页位置时
- 需要为交付印刷厂的文档自动添加出血（bleed）、裁切标记（crop marks）与套准标记时
- 需要通过 @top-center 等页边距盒与 string-set 自动生成动态章节页眉及页码计数器时

## 工作原理

- 上传自包含的 HTML 文档（可选择性上传独立的 CSS 样式表），并指定排版引擎（Paged.js、原生 Chromium 或自动切换）。
- 系统在无头 Chromium 中以打印媒体（print media）模式载入文档，Paged.js 引擎自动将文档内容分块至固定页面盒，并在裁切区域外部绘制印刷标记。
- 浏览器启用“页面尺寸取自 CSS”与背景图层打印选项，渲染出包含出血外扩区域的高保真多页 PDF 并提供下载。

## 使用案例

- 将 Markdown 或富文本转换后的 HTML 技术白皮书排版为带页码和章节标题的出版物
- 批量排版带有 3mm 出血与标准角线印刷标记的产品目录、宣传册与折页
- 基于标准 Web 模板自动化生成带有页边距盒与公司抬头的高保真年度财务报告

## 常见问题

### 文档中的图片和字体需要如何引入？

渲染器不会发起外部网络请求，图片需转换为 data-URI 格式内嵌，文字则基于服务端的系统字体进行排版。

### Paged.js 与原生 Chromium 引擎有什么区别？

Paged.js 支持生成裁切与套准标记、出血扩展以及复杂的分页生成内容；原生引擎适用于常规尺寸和页边距盒，但标记渲染能力有限。

### 导出的 PDF 尺寸为什么比 CSS 中声明的纸张尺寸大？

当启用了出血（bleed）或裁切标记时，PDF 页面框会自动向外扩展，确保裁切线与套准标记完整落在成品尺寸之外。

### 支持在 HTML 文件中运行 JavaScript 脚本来生成内容吗？

本排版工作流针对纯 HTML 与 CSS 分页设计，文档内无需且不依赖自定义 JavaScript 脚本。

### 如何设置双面印刷的左右对称页边距？

可以在 CSS 中使用 @page :left 和 @page :right 伪类分别定义偶数页与奇数页的内外侧边距及页眉定位。

## 相关工具

- [HTML转PDF渲染器](https://elysiatools.com/zh/tools/html-to-pdf-renderer): 将有限HTML子集渲染为PDF
- [PDF页眉页脚片段](https://elysiatools.com/zh/tools/pdf-header-footer-snippets): 将HTML转换为PDF，并插入Logo/标题/日期等页眉页脚片段
- [邮件HTML转PDF](https://elysiatools.com/zh/tools/libreoffice-html-mail-to-pdf): 将邮件HTML内容渲染为PDF并保留基础排版
- [Markdown转PDF主题包](https://elysiatools.com/zh/tools/markdown-to-pdf-theme-pack): 将Markdown转换为PDF，支持深色/浅色/打印主题
- [PDF 表格提取到 CSV/JSON](https://elysiatools.com/zh/tools/pdf-table-extractor-to-csv-json): 用 OpenDataLoader 从 PDF 中抽取表格，并导出为结构化 JSON、扁平 CSV 或 HTML 表格
- [PDF转PowerPoint](https://elysiatools.com/zh/tools/pdf-to-powerpoint): 从PDF文件中提取文本内容并转换为PowerPoint演示文稿
- [PDF转文本增强版](https://elysiatools.com/zh/tools/pdf-to-text-advanced): 高级PDF转文本转换器，支持页码选择、格式选项和元数据提取
- [OCR PDF 转结构化 JSON 桥](https://elysiatools.com/zh/tools/ocr-pdf-to-structured-json-bridge): 按几何结构抽取 PDF 文本层（y 坐标分行、列间隙识表、字号识标题、冒号键值对），然后逐字段填入用户提供的 JSON Schema——标签按归一化键名匹配、值按声明类型归一化，并用 ajv 校验。

## 示例

- [PDF示例](https://elysiatools.com/zh/samples/pdf-samples): 2026-02-01 到 2026-02-10 工具生成的PDF示例
- [Markdown 幻灯片示例](https://elysiatools.com/zh/samples/md-slide-deck-to-pdf): 用于测试 PDF 导出的 Remark/Marp 风格 Markdown 幻灯片
- [包含图片的HTML示例](https://elysiatools.com/zh/samples/html-with-images): 包含图片的HTML源代码示例，用于测试提取
- [HTML 查看器样本](https://elysiatools.com/zh/samples/html-viewer-samples): 用于浏览器内 HTML 查看器的样本文件