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

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

For that,

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

 

Example: I want to add a 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 the report as a 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 the 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.