The app.pdf_create generate PDFs which are not consistent with the preview and differ from browser to browser.
Preview:
PDF generated in Firefox: link
PDF generated in Chrome: link
The enclosed PDFs were generated on the same PC running Ubuntu 22.04 LTS. Although properly rendered in the preview, in the PDF the logo is shifted and cut, with Firefox the title is exploded, and the font size differs between all 3 mediums I tested.
With the actual logo of my company, the PDF looks even worse (is cut in half).
app.pdf_create generate call follows inspiration from lsw_knowledge:
app.pdf_create(
res._subject,
'a4',
'p',
res._marginx,
res._marginy,
res._header,
res._content,
res._footer,
res._css
);
Body
<span class="header"> <h2>[title]</h2></span>
<table class="custom-table">
[content]
</table>
footer:
<span class="footer">Page [page_cur] of [page_end]</span>
header:
<div class="logo-container">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA10AAA ....
2bjbAAAAAElFTkSuQmCC" />
</div>
css:
`#page{
display:flex;
flex-flow:column nowrap;
line-height:120%;
font-family:'Roboto','Arial','Helvetica',sans-serif;
font-size:14px;
}
.logo-container {
text-align: center;
}
.logo-container img {
max-width: 20%;
height: auto;
display: block;
margin: 0 auto;
}
.custom-table {
border-collapse: collapse;
width: 100%;
}
.custom-table th, .custom-table td {
border: 1px solid #ddd;
padding: 8px;
}
.custom-table th {
background-color: #f2f2f2;
text-align: left;
}
.marked-row {
background-color: dodgerblue;
}
`
margin_x: 60
margin_y: 70
Am I doing something wrong? How to ensure the proper look of the PDF when calling app.pdf_create generate?