使用Flying Saucer设置横向页面时出现前置空白页如何解决？

核心原因 #

出现该问题通常是三类原因触发了Flying Saucer的自动分页逻辑：

• 全局元素默认边距、@page规则默认边距导致内容溢出
• 自定义的横向页元素尺寸超出A4横向实际物理尺寸，溢出内容触发提前分页
• 元素前默认带分页符属性，或者代码内多余空白节点被识别为内容触发分页

具体修复方案 #

1. 先重置全局默认样式 #

清除默认边距，避免不可见的外边距撑大页面尺寸：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;
}

2. 修正页规则和元素尺寸配置 #

A4横向的物理尺寸为29.7cm宽 × 21cm高，你设置的30cm宽度已经超出物理尺寸，叠加默认边距后必然溢出。同时显式关闭元素前的自动分页：

@page land { 
    size: A4 landscape; 
    margin: 0; /* 若需要留白可改为1cm等自定义数值，后续元素尺寸对应减去两倍边距即可 */
}
.landscapePage {
    page: land;
    page-break-before: avoid; /* 禁止元素前自动插入分页符 */
    page-break-inside: avoid; /* 禁止元素内部被拆分分页 */
    height: 21cm; /* 和A4横向高度匹配，若@page有边距请对应减去上下边距总和 */
    width: 29.7cm; /* 和A4横向宽度匹配，若@page有边距请对应减去左右边距总和 */
    background-color: green;
}

3. 清除多余空白节点 #

你的HTML代码里div标签前有大量缩进空白，部分版本的Flying Saucer会将连续空白识别为文本内容，刚好触发分页阈值就会生成空白页。将HTML精简为无多余空白的格式即可：

<div class="landscapePage"></div>

4. 若横向页前有其他内容 #

给前序内容的最后一个元素添加属性page-break-after: avoid，避免前序内容末尾自动生成分页符。

内容的提问来源于stack exchange，提问作者Hola