Skip to Content
This question has been flagged
5 Replies
11812 Views
Avatar
Sven Anders

Hello!

I need some help adapting the the Invoice/Sale reports (using the "report.external_layout_header" view) to our company layout. I'm using some adapted QWeb reports which I downloaded from a GitHub archive and they are generally doing fine.

Our business paper shows a logo on the top right, a thin line going from the left to the right of the paper (behind the logo) and a colored bar of 1.3cm on the right of the paper (going from top to the bottom).

I experimented with the following code (in "report.external_layout_header"):

<?xml version="1.0"?>

<t t-name="report.external_layout_header">

<div class="header">

<div class="row zero_min_height">

<!-- line under the logo -->

<div style="position: absolute; top: 2.8cm; left: 0cm; right: 0cm; width: 100%; border-bottom: solid 1px black;"> </div> <!-- right margin -->

<div style="position: absolute; top:0cm; left:19.6cm; right:0cm; height:100%; background-color: #FFBA00;"> </div> <div>

<img t-if="company.logo" t-att-src="'data:image/png;base64,%s' % company.logo" style="max-height: 3cm; margin-right:0.25cm; margin-top: 0.5cm; float:right;" class="text-right"/>

</div>

</div>

</t>

 

But it does not work...

I have several problems:

  1. The line does not go from the very left to the the very right (about 1cm is truncated at each end).
  2. The line is over (and not behind) the logo.
  3. The colored bar does not go over the whole document, it is too wide in HTML and does appear on the PDF.

Previously I've done it in RML and there it worked fine...

Maybe I'm doing it wrong in QWeb, so any recommendations and tips are welcome!

Has anybody done something similar in QWeb already?

 

 

 

 

Avatar
Discard
Avatar
Rucha Dave (rda)
Best Answer

For problem 1 , Set left-margin and right-margin to zero in paperformat of perticular report. by doing this, this issue can be solved..

For problem 2 , You need to add " margin-top " in a style attribute of line div. 

For problem 3 , I can't understand your point.

Avatar
Discard
Sven Anders
Author

Thanks for the answer. Regarding problem 2: I used the wrong term. I meant "behind" the logo not "over". I solved this using the "z-index" style attribute. Regarding problem 3: I need a colored, orange bar over the whole page, going from the very top to the very bottom of the page.

Avatar
Aboura Nacim
Best Answer

SVG work fine for me, witout xmlns

Avatar
Discard
Avatar
OdooFan
Best Answer

Hi Sven, I think you should add "z-index:-1; " to your div style of that line behind the logo. I also used "overflow: visible;" to solve the same kind of problem in my Qweb external_layout_footer. See below for a part of my code (I added an extra image to our company settings):

<!-- footer image-->
     <div style="z-index:-1;position: absolute; overflow: visible; padding-top: 5px;" >
         <image align="left"  t-if="company.x_report_iso_logo" t-att-src="'data:image/png;base64,%s' % company.x_report_iso_logo" width="65px"  />
     </div>

<!--footer text-->

    <div class="text-center" style="border-top: 1px solid #007F64; font-size: 11px; padding-top: 5px; padding-left: 60px; padding-right: 60px;">

               <t t-if="company.custom_footer">
                <span t-raw="company.rml_footer"/>
               </t>

 

Avatar
Discard
Avatar
Sven Anders
Author Best Answer

I'm still struggling with this problem.

It was really easy to accomplish this with RLM (it only took me 2 hours learning, setting and optimizing the layout). But it seems almost impossible to do this in QWeb! The HTML output is problematic, because everything is so dynamic and anything I tried is not shown in PDF (using wkhtmltopdf).

I tried several things. I changed the "report.style" CSS and added to the "body" the following:

1. Using gradients:
   background: -webkit-gradient(left top, right top, color-stop(0%, #ffffff), color-stop(76%, #ffffff), color-stop(77%, #ffffff), color-stop(77%, #ffba00), color-stop(100%, #ffba00));
   background: linear-gradient(to right, #ffffff 0%, #ffffff 76%, #ffffff 77%, #ffba00 77%, #ffba00 100%);

I see something in HTML but nothing in PDF. The specification of the width is problematic.

2. Using a background image (full width):

   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACbAAAAAQAgMAAACwiCOmAAAACVBMVEUAAAD/ugD///89bnSrAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQffAhoOFwaMpuxoAAAAHWlUWHRDb21tZW50AAAAAABDcmVhdGVkIHdpdGggR0lNUGQuZQcAAABASURBVGje7dKhEQAACAOxLsn+q6BrcLhkhL9PoM0XaTEbZsNsZsNsmM1smA2zYTazYTbMZjbMhtkwm9kwG2Y7LEyZ2OBCemJeAAAAAElFTkSuQmCC');
   background-repeat: repeat-y;
   background-size: 100% auto;

The colored bar is too wide in HTML and I see nothing at all in PDF.

3. Using a background image (only the colored bar):

    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACbAAAAAQAgMAAACwiCOmAAAACVBMVEUAAAD/ugD///89bnSrAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQffAhoOFwaMpuxoAAAAHWlUWHRDb21tZW50AAAAAABDcmVhdGVkIHdpdGggR0lNUGQuZQcAAABASURBVGje7dKhEQAACAOxLsn+q6BrcLhkhL9PoM0XaTEbZsNsZsNsmM1smA2zYTazYTbMZjbMhtkwm9kwG2Y7LEyZ2OBCemJeAAAAAElFTkSuQmCC');
    background-repeat: repeat-y;
    background-size: 1.3cm auto;
    background-position: right top;

 In HTML this is the best from the layout, but I do not see anything at all in PDF.

4. Using a complete background image in SVG:

   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMTBtbSIgaGVpZ2h0PSIyOTdtbSI+CiA8cGF0aCBzdHlsZT0iZmlsbDpub25lO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDoxcHg7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW9wYWNpdHk6MSIgZD0ibSAwLDEwMi4yNTU5MSA3NDQuMDk0NDksMCIgLz4KIDxyZWN0IHN0eWxlPSJmaWxsOiNmZmJhMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIHdpZHRoPSI0OS42NTIwNDIiIGhlaWdodD0iMTA1Mi4xMzIxIiB4PSI2OTQuMzM5NiIgeT0iMC4xMzgyNDc5MSIgcnk9IjAiIC8+Cjwvc3ZnPgo=);
      background-origin:border-box;
      background-size: cover;

    This SVG has the following content:
     <svg xmlns="http://www.w3.org/2000/svg" width="210mm" height="297mm">
      <path style="fill:none;fill-rule:evenodd;stroke:black;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 0,102.25591 744.09449,0" />
      <rect style="fill:#ffba00;fill-opacity:1;stroke:none" width="49.652042" height="1052.1321" x="694.3396" y="0.13824791" ry="0" />
     </svg>

You can see the line and colored bar in HTMl and it's almost correct, if you set the correct width of the window. In PDF I see nothing at all.

Does anybody have any other ideas? It would be so easy, if the paper format dialog would allow to give a background image for the whole paper (maybe as PNG/SVG/PDF).

Avatar
Discard