Odoo 10 Qweb Report打印/导出PDF时CSS样式失效求助

我之前在Odoo 10开发QWeb报表时，也遇到过和你一模一样的情况——屏幕上样式显示正常，但生成PDF或者打印时，颜色、背景、边距这些样式全部失效。折腾了好一阵才找到靠谱的解决办法，分享给你：

问题根源 #

Odoo生成PDF依赖的是wkhtmltopdf工具，它对页面内嵌套在.page容器里的<style>标签支持有限。这类局部样式在屏幕渲染时能被浏览器正确解析，但wkhtmltopdf在处理分页内容时，会忽略掉.page内部的样式定义，导致PDF/打印时样式不生效。

可行解决方案 #

1. 将样式移到报表的<head>区域 #

把原本放在.page里的样式，转移到报表模板的<head>部分，并且加上打印媒体查询（@media print），确保wkhtmltopdf能正确识别：

<template id="custom_report_template" inherit_id="report.external_layout">
    <!-- 往报表头部插入全局样式 -->
    <xpath expr="//head" position="inside">
        <style type="text/css">
            /* 屏幕显示样式 */
            .header, .footer {
                display: none;
            }
            .custom-content {
                color: #2c3e50;
                background-color: #ecf0f1;
                padding: 12px;
                margin: 8px 0;
            }

            /* 打印/PDF专用样式，强制生效 */
            @media print {
                .header, .footer {
                    display: none !important;
                }
                .custom-content {
                    color: #2c3e50 !important;
                    background-color: #ecf0f1 !important;
                    padding: 12px !important;
                    margin: 8px 0 !important;
                }
            }
        </style>
    </xpath>

    <!-- 报表内容区域 -->
    <div class="page">
        <div class="custom-content">你的报表内容</div>
    </div>
</template>

2. 直接用t-att-style绑定元素样式 #

如果只是个别元素需要特殊样式，可以直接在元素上用Odoo的t-att-style属性绑定内联样式，这样wkhtmltopdf会优先解析：

<div class="page">
    <div t-att-style="'color: #2c3e50 !important; background-color: #ecf0f1 !important; padding: 12px !important; margin: 8px 0 !important;'">
        带样式的报表内容
    </div>
</div>

3. 检查wkhtmltopdf配置 #

确保Odoo的wkhtmltopdf命令参数里包含--enable-local-file-access和--dpi 96（或更高），这能提升工具对本地样式的支持度。你可以在Odoo的系统设置里找到PDF打印的配置项调整参数。

注意事项 #

• 所有需要在PDF/打印中生效的样式，尽量加上!important来提升优先级，避免被wkhtmltopdf的默认样式覆盖；
• 背景颜色在PDF中默认可能不显示，如果你需要强制打印背景，可以在wkhtmltopdf参数里添加--print-media-type和--background。

亲测这些方法在Odoo 10里都能解决样式失效的问题，你可以根据自己的需求选择合适的方案！

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