使用Chromium无头模式将HTML转为PDF时，即使设置了@page { size: A4 landscape; margin: 0; }和body { margin: 0; padding: 0; }，仍可能生成多余空白页——根本原因常是内部元素高度计算溢出页面物理尺寸，导致浏览器排版引擎触发强制分页。
使用chromium无头模式将html转为pdf时，即使设置了@page { size: a4 landscape; margin: 0; }和body { margin: 0; padding: 0; }，仍可能生成多余空白页——根本原因常是内部元素高度计算溢出页面物理尺寸，导致浏览器排版引擎触发强制分页。
在HTML转PDF（尤其是通过Chromium --headless=new --print-to-pdf）的实践中，“本该单页却输出两页（其中一页空白）”是最典型、最易被忽视的排版陷阱。问题表面看是分页逻辑异常，实则源于CSS盒模型在打印上下文中的隐式行为差异。
以你提供的代码为例，关键症结在于这段样式：
.item div {
padding: 2em;
text-align: left;
overflow-y: hidden;
height: 100%; /* ❌ 问题根源 */
}虽然 .item 自身设为 height: 100%（即占满容器可用高度），但当其子元素 <div> 也声明 <code>height: 100% 且同时设置 padding: 2em 时，根据CSS规范，height: 100% 指的是内容区高度，而 padding 会额外增加总占用空间（box-sizing 默认为 content-box）。结果就是：.item div 的实际高度 = 100% + 2em × 2 > .item 高度 → 内容溢出 → Chromium 渲染器判定需另起一页容纳“多出”的像素，最终产生空白第二页。
✅ 正确解法非常简洁：移除 height: 100%，依赖自然流式布局与 overflow-y: hidden 控制截断：
立即学习“前端免费学习笔记（深入）”；
.item div {
padding: 2em;
text-align: left;
overflow-y: hidden;
/* height: 100%; ← 删除这一行 */
}此外，为确保真正严格单页，还需同步检查以下关键点：
-
@page尺寸单位一致性：A4横向尺寸为841pt × 594pt（非px或mm），若CSS中混用单位（如width: calc(841pt - 2px)），2px在高DPI下可能引入不可控偏移； -
字体与行高影响：
font-size: 18px+ 默认line-height可能撑高段落，建议显式设置line-height: 1.2或1.3并用box-sizing: border-box统一盒模型； -
避免隐式换行/空格：HTML中换行符在
white-space: normal下会生成空格，大量文本间多余空格可能累积成“不可见高度”，可对.container添加font-size: 0;，再对.item重置font-size: 18px;； -
Chromium命令行参数校验：你使用的
--print-to-pdf-no-header出现两次，属冗余；应精简为：google-chrome --headless=new --disable-gpu --no-sandbox \ --print-to-pdf="output.pdf" \ --no-pdf-header-footer \ empty.html
⚠️ 注意：Chromium 的打印渲染基于 Blink 引擎的页面快照+分页重排机制，它不等同于CSS Paged Media标准（如WeasyPrint支持的完整
@page,@bottom,break-inside: avoid等）。因此，依赖break-inside: avoid或复杂分栏控制时，Chromium可能失效——此时应切换至专业排版引擎（如WeasyPrint +@page { size: A4 landscape; }+break-before: page）。
总结一句话：PDF单页 = 物理尺寸精确 + 盒模型可控 + 排版无溢出。删掉那行多余的 height: 100%，只是开始；理解浏览器如何把“像素”翻译成“纸张”，才是稳定导出的底层能力。
