odoo10 report添加自定义CSS

最新推荐文章于 2024-04-01 11:45:00 发布

ensky.

最新推荐文章于 2024-04-01 11:45:00 发布

阅读量1.4k

点赞数

文章标签： odoo

本文链接：https://blog.youkuaiyun.com/qingtianjushi/article/details/78595858

版权

本文介绍在Odoo环境中为报告添加CSS样式的两种方法。第一种是在报告模板内直接定义样式；第二种是通过创建独立的CSS模板并在报告中引用。文章提供了具体的XML示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

环境：ubuntu16 64bit ,odoo10

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

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

整个模块的代码下载：http://download.youkuaiyun.com/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.youkuaiyun.com/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