How to Set Watermark Text or Watermark Image in Background of QWEB Report?

How to Set Watermark Text or Watermark Image in Background of QWEB Report?

Descriptions:

In Qweb Report, we can add watermark text or images in background.

For that,

we have to take one <div> (HTML tag), <p> or <img> tag with many CSS attributes.

Example: I want to add sale order company logo in sale report as watermark text to the report in orange colour.

Add Following <div> in sale–>view–>report_saleorder.xml–>in <div class=”page”>

In report_saleorder.xml File

<t t-if=”doc.company_id.logo”>

<div style=”position:absolute;opacity:0.25;width:100%;text-align:center;z-index:1000;”>

<img t-att-src=”‘data:image/png;base64,%s’ % doc.company_id.logo”/>

</div>

</t>

 

Explanation:

Company image of sale order will get print in report as watermark. The image will be render using

data:image/png;base64”.

  • You can add css to elements in QWeb reports so you can add images in it.
  • You can do anything you’d like with CSS so just host an image somewhere and add an element to your report which you style as you’d like.

Other Example: I want to add order number in sale report as watermark text to the report in orange color.

<t t-if=”o.namef”>

<div class=”watermark” style=”position:absolute;opacity:0.25;font-size:3em;width:100%;text-align:center;z-index:1000;”>

<p t-field=”o.name”/>

</div>

</t>

For any further queries feel free to Contact Us we would be glad to help you.