如何解决Odoo 17中自定义页眉与报表内容重叠问题

问题根源 #

Odoo PDF报表依赖wkhtmltopdf渲染，页眉是渲染在@page规则定义的margin-top区域内的。如果页眉实际高度超过这个区域的高度，就会和正文内容重叠。之前设置body的margin-top仅对第一页生效，是因为body样式不会影响后续页面的@page布局；给页眉加margin-bottom无效，是因为页眉本身处于margin区域内，该属性无法推动正文区域下移。

解决方案 #

1. 全局调整@page的margin-top值 #

修改报表的CSS规则，增大@page的margin-top，确保其高度足够容纳扩展后的页眉，同时预留少量冗余空间：

@page {
    /* 根据页眉实际高度调整，比如从默认10mm改为20mm */
    margin-top: 20mm;
    margin-bottom: 10mm;
    margin-left: 15mm;
    margin-right: 15mm;
}

2. 限制页眉容器的最大高度 #

在继承的模板中给页眉容器添加样式，防止内容溢出超出@page的margin-top区域：

<template id="custom_external_layout" inherit_id="web.external_layout_standard">
    <xpath expr="//div[@class='header']" position="attributes">
        <attribute name="style">max-height: 18mm; overflow: hidden;</attribute>
    </xpath>
    <xpath expr="//div[@class='header']" position="inside">
        <!-- 你的额外页眉内容 -->
        <div class="custom-header" style="font-size: 10px; line-height: 1.2;">
            公司地址：XX市XX区XX路XX号<br/>
            联系电话：XXXX-XXXXXXX
        </div>
    </xpath>
    <!-- 嵌入CSS规则 -->
    <xpath expr="//head" position="inside">
        <style>
            @page {
                margin-top: 20mm;
                margin-bottom: 10mm;
                margin-left: 15mm;
                margin-right: 15mm;
            }
            .header {
                max-height: 18mm;
                overflow: hidden;
            }
        </style>
    </xpath>
</template>

3. 优化页眉内部元素样式 #

通过调整字体大小、行间距、内边距等，压缩页眉的实际高度，避免不必要的空间占用：

.custom-header {
    font-size: 10px;
    line-height: 1.2;
    margin: 5px 0;
    padding: 0;
}

验证要点 #

• 确保wkhtmltopdf版本为0.12.6（带官方补丁），旧版本可能存在样式渲染兼容问题。
• 预览报表时检查所有页面的页眉与正文是否都无重叠，避免仅测试第一页。

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