为什么我的带有 CSS 的 Odoo 9 自定义 Qweb 报告不起作用？答案

【问题标题】：Why does my Odoo 9 custom Qweb report with CSS is not working?为什么我的带有 CSS 的 Odoo 9 自定义 Qweb 报告不起作用？
【发布时间】：2017-06-01 13:18:57
【问题描述】：

我正在创建一个关于 Odoo 9 的新报告，它使用 css 样式将文本放置在背景图像上。图片在背景中，占据了整个 A4 页面，没有任何边距。

在 html 中，它工作正常。但是，当我将报告打印为 PDF 时，左右两边都有空白边距，并且文本位于背景图像下方。似乎没有应用 CSS 规则。您是否找到使其在 PDF 中工作的任何解决方案？

这是我的报告：

<template id="sub_proposal">
<style type="text/css">
    .container {
        padding: 0mm;
    }
    #sponsor-ref {
        position: absolute;
        top: 84mm;
        left: 45mm;
    }
    #form_image {
        position: absolute;
        top: 0mm;
        left: 0mm;
        width: 210mm;
        height: 297mm;
    }
    #form_image img {
        max-width: 100%;
        max-height: 100%;
        margin: auto;
    }
</style>
<t t-call="report.html_container">
    <t t-foreach="docs" t-as="o">
        <div class="page">
            <div id="form_image">
                <span t-field="o.sub_proposal_form" t-field-options='{"widget": "image"}'/>
            </div>
            <span id="sponsor-ref" t-field="o.ref"/>
        </div>
    </t>
</t>

【问题讨论】：

标签： report odoo wkhtmltopdf odoo-9 qweb

【解决方案1】：

style 标记和内容必须在<div class="page"> 元素中设置。

^{_{我没有任何文档，仅凭经验。}}

^{_{Link to same question on Odoo forum}}

【讨论】：

【解决方案2】：

这将在 pdf 上打印带有文本的图像

<template id="account_report_id" inherit_id="account.report_invoice_document">
    <p t-if="o.fiscal_position_id.note" position="after"><br/><br/>
        <img t-if="o.partner_id.image" t-att-src="'data:image/png;base64,%s' % o.partner_id.image" style="float:right;max-height:40px;"/><br/><br/>
        <span style="float: right;">Customer Sign</span>
    </p>
 </template>

【讨论】：