使用Chromium无头模式将HTML转为PDF时，即使设置了@page { size: A4 landscape; margin: 0; }和body { margin: 0; padding: 0; }，仍可能意外生成空白第二页——根本原因常是内部元素（如.item div）声明了height: 100%，在盒模型计算中叠加内边距后实际高度超出容器，触发分页引擎强制换页。
使用chromium无头模式将html转为pdf时，即使设置了`@page { size: a4 landscape; margin: 0; }`和`body { margin: 0; padding: 0; }`，仍可能意外生成空白第二页——根本原因常是内部元素（如`.item div`）声明了`height: 100%`，在盒模型计算中叠加内边距后实际高度超出容器，触发分页引擎强制换页。
在HTML转PDF流程中，“看似刚好填满一页”往往暗藏陷阱。你提供的代码意图明确：用CSS Grid构建8个等宽卡片，限定.container为A4横向尺寸（841pt × 594pt），并通过@page { size: A4 landscape; margin: 0mm; }消除页面级边距。但最终输出两页（第二页为空），问题并不出在页面设置，而在于盒模型的高度继承与溢出行为。
关键症结在于这段样式：
.item div {
padding: 2em; /* ≈ 32px（以16px基准计）*/
text-align: left;
overflow-y: hidden;
height: 100%; /* ⚠️ 危险！ */
}
height: 100%要求该div严格等于其父元素.item的高度。但.item本身未显式设高，其高度由内容撑开；而.item div又自带2em内边距——此时height: 100%会强制将内容区高度压缩至“父高减去内边距”，但浏览器渲染引擎（尤其是Chromium的PDF导出模块）在计算分页时，会将整个元素的布局占用高度（含padding） 视为分页依据。结果就是：.item div的实际渲染高度 > .item的可用空间 → 突破A4页面物理边界 → 触发分页器插入空白页以容纳“溢出部分”。
✅ 正确解法：移除height: 100%，改用更健壮的布局控制：
.item div {
padding: 2em;
text-align: left;
overflow-y: auto; /* 或 hidden，按需保留 */
/* height: 100%; ← 删除此行 */
box-sizing: border-box; /* 确保padding计入width/height */
}
同时建议补充防御性约束：
- 在
.container上添加max-width: 841pt; max-height: 594pt; - 对
.item启用flex: 1; min-height: 0;（若改用Flex布局） - 使用
@media print包裹所有打印专用样式，避免屏幕样式干扰
⚠️ 注意事项：
- Chromium
--headless=new的PDF导出基于打印预览引擎，不完全等同于CSS Paged Media标准，对height: 100%、position: absolute、浮动等支持存在隐式限制； -
2em内边距在不同字体大小下实际像素值浮动，建议改用px或rem单位提升可预测性； - 批量导出时，务必验证每页内容高度是否动态变化——静态尺寸声明无法应对长文本自动换行导致的高度增长。
总结：HTML转PDF的单页精准控制，本质是在浏览器渲染逻辑与PDF分页模型之间建立确定性映射。放弃对height: 100%的盲目依赖，转向flex/grid的自然流式伸缩、box-sizing: border-box的尺寸可控性，以及overflow的容错处理，才能真正实现“所见即所得”的稳定单页输出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
