Odoo 15中OCA模块report_qweb_element_page_visibility是否导致隐藏元素留空白？

这个问题是wkhtmltopdf处理display:none的特性导致的——元素在初始渲染时已经占用了布局空间，后续的display:none只是隐藏了视觉内容，但空间不会被回收。以下是几种可行的解决方案：

方案1：增强模块的隐藏样式 #

直接覆盖模块的默认CSS，给隐藏状态的元素添加彻底的空间重置样式：

在你的报表QWeb文件中添加自定义CSS：

/* 覆盖report_qweb_element_page_visibility的隐藏样式 */
.first-page:not(.visible), .not-first-page:not(.visible) {
    display: none;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    line-height: 0 !important;
}

!important是为了确保样式优先级高于模块和Bootstrap的默认样式，强制重置所有可能占用空间的属性。

方案2：使用CSS分页媒体原生特性（无需依赖OCA模块） #

直接利用wkhtmltopdf支持的CSS @page 和 running 元素来实现页眉的分页控制，这种方式更可靠，不会出现留白问题：

步骤1：添加CSS样式 #

/* 定义页眉区域 */
@page {
    @top-right {
        content: element(right-header);
    }
    @top-left {
        content: element(left-header);
    }
}

/* 定义首页和其他页的页眉元素 */
.header-left-first {
    position: running(left-header);
}
.header-right-first {
    position: running(right-header);
}
.header-right-other {
    position: running(right-header);
    display: none;
}

/* 首页单独设置页眉 */
@page :first {
    @top-left {
        content: element(left-header);
    }
    @top-right {
        content: element(right-header);
    }
    .header-right-first { display: block; }
    .header-right-other { display: none; }
}

/* 非首页切换页眉 */
@page :not(:first) {
    .header-right-first { display: none; }
    .header-right-other { display: block; }
}

步骤2：调整HTML结构 #

<!-- 首页左侧页眉 -->
<div class="header-left-first">FIRST PAGE LEFT</div>
<!-- 首页右侧页眉 -->
<div class="header-right-first">FIRST PAGE RIGHT</div>
<!-- 其他页右侧页眉 -->
<div class="header-right-other">OTHER PAGE RIGHT</div>

这种方式直接通过CSS分页规则控制元素的渲染，从根源上避免了留白问题，不需要依赖第三方模块。

方案3：调整HTML容器结构 #

把互斥的元素放在同一个父容器中，确保同一时间只有一个元素占据空间：

<div class="row">
    <div class="col-6">
        <div class="first-page" name="left_block">
            FIRST PAGE LEFT
        </div>
    </div>
    <div class="col-6" name="right_block">
        <!-- 用同一个容器包裹两个互斥元素 -->
        <div class="header-container">
            <div class="first-page">
                FIRST PAGE RIGHT
            </div>
            <div class="not-first-page">
                OTHER PAGE RIGHT
            </div>
        </div>
    </div>
</div>

再配合方案1的增强样式，能进一步减少留白的概率。

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