ReLaXed icon indicating copy to clipboard operation
ReLaXed copied to clipboard

Style Header and Footer

Open dawo85 opened this issue 7 years ago • 1 comments

Hi, I'm doing the template with pug. My problem is that I don't get the desired style for the header and footer. The header is defined like this:

template#page-header
    style(type='text/css').
        .pdf-header, .pdf-header  > table {
 	    width: 100%;
 	}
 	 .pdf-header > table > tbody > tr > td {
 	    font-size: 10px;
 	}
 	.pdf-header > table > tbody > tr > td > img {
 	    width: 173px;
 	}
 	.pdf-header > table > tbody > tr > td {
 	    font-size: 10px;
 	    font-family: sans-serif;
 	}
     .pdf-header
         table
 	     colgroup
 	         col(width='278')
 		 col(width='292')
 		 col(width='292')
 		 col(width='292')
		 col(width='292')
             tbody
 	         tr
 		     td(rowspan='6')
 		         img(src='logo-img.png')
	         tr
 		     td(class='f-bold') #{ data.company.name }
 		 tr
 		    td #{ data.company.street }
 		 tr
 		    td #{ data.company.zip} #{ data.company.city }, #{ data.company.state_id[1] }
 		 tr
		     td #{ data.terms.tlf }: #{ data.company.phone } - Fax: #{ data.company.fax }
 		 tr
 		    td #{ data.company.email } - #{ data.company.website }

The footer is defined like this:

template#page-footer
    style(type='text/css').
        .pdf-footer, .pdf-footer  > table {
	    width: 100%;
	}
	.pdf-footer > table > tbody > tr > td {
	    font-size: 10px;
	}
	.pdf-footer
	    table
	        colgroup
		    col(width='10%')
		    col(width='80%')
		    col(width='10%')
	        tbody
		    tr(colspan='3')
			td
                             img(src='publi01.jpg')
		    tr
			td 
			td(class="center") #{ data.company.rml_footer }
			td #{ data.terms.pagina } #[span.pageNumber] / #[span.totalPages]

The style of page is defined like this:

$page_width: 210mm;
$page_height: 297mm;

@page {
    size: $page_width $page_height;
    -relaxed-page-width: $page_width;
    -relaxed-page-height: $page_height;
    margin: 15mm 10mm 15mm 10mm;
}

The result: captura de pantalla 2018-07-10 a les 10 37 43

The footer and header missing information. The header and footer are half drawing. I have change the height of style, but the result is the same. I searched information in the documentation, but I didn't find the solution. Can you insert any image in the footer or the header? I have read this issue where it says that the footer or the header can't insert images. Thanks you.

dawo85 avatar Jul 10 '18 08:07 dawo85

The limitation is in puppeteer: https://github.com/GoogleChrome/puppeteer/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+footerTemplate

mmsinclair avatar Nov 16 '18 11:11 mmsinclair