When generating a PDF from HTML, I am facing an issue where the signature image breaks on another page. Is there a way to ensure that if content or images break, they will move to another PDF page?
Puppeteer version - 3.3.0 Node version - 12.16.1
Code:
await page.pdf({
path: pdfPath,
format: 'A4',
printBackground: true,
displayHeaderFooter: true,
headerTemplate: '<div id="header-template" style="font-size:10px !important; color:#808080; padding-left:10px"><span class="">Production</span></div>',
footerTemplate: '<div id="footer-template" style="font-size:10px !important; color:#808080; padding-left:10px"><span class="">Production</span><span class="pageNumber" style="font-size:10px !important; color:#808080; padding-left:200px"></span></div>',
margin: {
top: '100px',
bottom: '100px',
right: '30px',
left: '30px',
},
});
html:
<div style="float: left; margin-top: 5px;width: 98.5%;">
<div id="signature">
<div class="sign">
<img src="{{signature}}" alt="sign"
style="margin-top: 10px;width: 120px;height: 120px;float: right;" />
</div>
<span>Signature By {{ signature_by }}<br>({{ signature_by_role }})</span>
</div>
</div>
CSS:
#signature {
float: right;
width: auto;
margin-right: 1%;
}
#signature img {
width: 100%;
}
#signature span {
text-align: center;
width: 100%;
color: #000;
float: left;
font-size: 11px;
font-weight: 500;
}
.sign {
min-height: 50px;
text-align: center;
margin: 0 auto;
}