使用Flying Saucer生成PDF时前两页设横版出现前置空白页如何解决

算力阿峰

2026-10-7

问题修复方案

空白页产生核心原因

默认@page规则中额外定义的height/width和A4标准尺寸冲突，导致内容溢出自动触发分页
首个横版页面同时添加了page-break类，Flying Saucer初始化时先加载默认竖版布局，遇到page-break属性会先触发一次空白分页再切换为横版布局，产生多余空白页
自定义横版类额外定义的height/width和@page land的尺寸规则冲突，触发二次分页

修复步骤

1. 清理冗余冲突的CSS规则

删除默认@page和横版类中多余的尺寸定义，页面尺寸统一由@page的size属性控制即可。

2. 调整分页逻辑

首个横版页面不要加page-break类，分页属性仅在需要切换页面的元素上添加。

修正后代码示例

@page {
    margin-top: 3.3cm;
    margin-left: 2cm;
    margin-right: 2cm;
    margin-bottom: 3.3cm;
    size: A4 portrait;
}

@page land { 
    size: A4 landscape;
    margin-top: 3.3cm;
    margin-left: 2cm;
    margin-right: 2cm;
    margin-bottom: 3.3cm;
}
.landscapePage { 
    page: land;
}
/* 如果你原本的page-break类是定义分页的，保留即可 */
.page-break {
    page-break-after: always;
}

<!-- 第一页横版不加page-break，避免开头分页 -->
<div class="landscapePage">
 page 1
</div>

<!-- 第二页横版加page-break，和前一页分隔 -->
<div class="page-break landscapePage">
 page 2
</div>

<!-- 后续竖版页面正常加page-break切换回默认布局即可 -->
<div class="page-break">
  后续竖版页面内容
</div>