为什么 header 中的特定 div 与 Odoo 13 中的 PDF 页面重叠？

Question

我正在 Odoo 13 Enterprise 中制作自定义 PDF 报告。我必须在报告每一页的左边距添加一个垂直文本。所以我需要把垂直文本放在 header.

为此，我首先创建了自己的论文格式：

<record id="my_paperformat_euro" model="report.paperformat">
    <field name="name">My European A4</field>
    <field name="default" eval="False" />
    <field name="format">A4</field>
    <field name="orientation">Portrait</field>
    <field name="margin_top">35</field>
    <field name="margin_bottom">18</field>
    <field name="margin_left">0</field>
    <field name="margin_right">0</field>
    <field name="header_line" eval="False" />
    <field name="header_spacing">30</field>
</record>

然后我修改了调用报告以应用我的论文格式的报告操作：

<record id="sale.action_report_saleorder" model="ir.actions.report">
    <field name="paperformat_id" ref="my_module.my_paperformat_euro"/>
</record>

我这样做是因为如果我想在“边距”中书写，纸张格式不能有任何边距，以免隐藏我在那里写的内容。当然，然后我对报告的所有主要元素应用了左边距。包含边距文本的 div 用负的绝对位置抵消了它。

然后我在报告 header 中添加了带有边距文本的 div：为此我自己做了 external_layout_standard 然后我继承了 external_layout 模板为了调用它（我只在这里粘贴相关代码）：

<template id="external_layout_standard">
    <!-- HEADER -->
    <div t-attf-class="header o_company_#{company.id}_layout o_my_special_page" t-att-style="report_header_style">
        ...
        <div class="o_my_margin text-muted">
            <span t-if="company.vat">CIF: <span t-field="company.vat"/></span>
            <span t-if="company.vat and company.company_registry"> | </span>
            <span t-if="company.company_registry" t-field="company.company_registry"/>
        </div>
    </div>
    ...
    <!-- BODY -->
    ...
    <!-- FOOTER -->
    ...
</template>

我在正确加载的 CSS 文件中定义了类:

div.o_my_special_page {
    margin-left: 15mm !important;
    margin-right: 15mm !important;
}

div.o_my_margin {
    position: absolute;
    top: 85mm;
    left: -65mm;
    z-index: -50147483647;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    font-size: 8pt;
    float: left;
    width: 150mm;
    height: 15mm;
    background: red;
}

现在，问题来了。此代码与 Wkhtmltopdf 0.12.1 完美配合。但是，安装了 Wkhtmltopdf 0.12.5 后，我得到了这个：

如你所见，我的页边空白div（红色的）的右边好像放了一个白色的div，这个白色的div是与报告内容的其余部分重叠。但是，如果我以 HTML 模式打印报告，或者如果我在安装了 Wkhtmltopdf 0.12.1 的情况下打印报告（如上所述），则不会发生这种情况。

有人知道为什么吗？有什么想法可以解决这个问题或实现我的目的的替代方法吗？

Answer 1

我终于找到了自己问题的答案。如果有人遇到和我一样的情况，关键是将以下样式添加到您的 CSS 文件中：

body {
    background: transparent !important;
}

这样可以避免表头与报表正文重叠。我在模块 report_qweb_pdf_watermark 中找到了这一行，顺便说一句，它是一个非常有趣的应用程序，可以为 PDF 报告添加水印。

NOTE: Do not apply that style to the body in previous versions of Wkhtmltopdf 0.12.5. It will work without the style, and besides, if you apply it, you will get the same problem as Wkhtmltopdf 0.12.5 without applying the style.

为什么 header 中的特定 div 与 Odoo 13 中的 PDF 页面重叠？

Why a specific div in the header is overlaping the page in PDFs in Odoo 13?

css

odoo

wkhtmltopdf

odoo-13