odoo10 report添加自定义CSS

环境：ubuntu16 64bit ,odoo10

odoo report 添加CSS，可以使用两种方法添加。

第一种：直接把CSS定义到 <div class="page"></div>中

整个模块的代码下载：http://download.csdn.net/download/qingtianjushi/10127681

<odoo><data><report id="action_report_qingjia"            model="qingjia.qingjiadan"            string="打印请假单"            report_type="qweb-pdf"            name="qingjia.qingjiadan_action_report"        />        <template id="qingjiadan_action_report">            <t t-call="report.html_container"><div class="page"><style type="text/css">.test{     margin: 12px 0px 12px 0px; font-size:25px; color:#F00;  border:5px solid red;}</style><table class="test"><tr class="test"><td>名字</td><td>请假天数</td><td>开始日期</td><td>原因</td><td>状态</td></tr><t t-foreach="docs" t-as="o"><tr><td><t t-raw="o.name" /></td><td><t t-raw="o.days" /></td><td><t t-raw="o.startdate" /></td><td><t t-raw="o.reason" /></td><td><t t-raw="o.state" /></td></tr></t></table></div>            </t>        </template></data></odoo>

第二种方式：

首先将css写入到一个template中，然后xpath的方式call这个template，最后在report中再call，可以直接看下面代码。

<odoo><data><template id="qingjia.css_style">.page {font-size: 20px;font-weight: bold;text-align: center;width: 100%;}.test-report{margin: 12px 0px 12px 0px;font-size:25px;color:#228800;border:5px solid blue;}</template><template id="qingjia.main_css" inherit_id="web.layout"><xpath expr="//head" position="inside"><style type="text/css"><t t-call="qingjia.css_style"/></style></xpath></template>        <template id="qingjiadan_action_report"> <t t-call="report.html_container"><div class="page"> <t t-call="qingjia.main_css"/> <table class="test-report"><tr class="test-report"><td>名字</td><td>请假天数</td><td>开始日期</td><td>原因</td><td>状态</td></tr><t t-foreach="docs" t-as="o"><tr><td><t t-raw="o.name" /></td><td><t t-raw="o.days" /></td><td><t t-raw="o.startdate" /></td><td><t t-raw="o.reason" /></td><td><t t-raw="o.state" /></td></tr></t></table></div>            </t>        </template><report id="action_report_qingjia"            model="qingjia.qingjiadan"            string="打印请假单"            report_type="qweb-pdf"            name="qingjia.qingjiadan_action_report"        /></data></odoo>

以上是直接把CSS写入同一个reprot的xml中，也可以新建一个XML来写CSS，最后在manifest中导入一下这个新的xml即可。

代码下载：http://download.csdn.net/download/qingtianjushi/10127847

参考：

https://github.com/odoo/odoo/issues/4359
https://github.com/anubia/anubia-wiki/wiki/Add-custom-CSS-to-Qweb-reports
http://xubi.me/blog/how-to-2/post/odoo-qweb-report-part-2-6
https://github.com/xubiuit/odoo_qweb_report_sample/tree/2.0.1