eKoopmans / html2pdf.js

Client-side HTML-to-PDF rendering using pure JS.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

While using pagebreak avoid-all creates a blank first page

zameelnp opened this issue · comments

const opt = {
margin: [10, 10, 10, 10],
image: { type: 'jpeg', quality: 1 },
html2canvas: {
scale: 3,
letterRendering: true,
useCORS: true
},
jsPDF: {
unit: 'mm', format: 'letter', orientation: 'portrait', putOnlyUsedFonts: true,
},
pagebreak: {
mode: ['avoid-all', 'css', 'legacy'],
}
};
html2pdf().from(modifiedHtmlContent).set(opt).save()
if i remove this avoid-all mode then it is working fine. but i know that this will mess up page break. so i have added avoid: ['tr', 'table', 'div', 'p', 'span']. But unfortunately this also creating blank first page.
so i have remove span from avoid then it is working fine. @eKoopmans could you please give me a solution for this? how can i work this page break without any issues?
my html content is:
<p><span style="font-size: 24px;"><strong>I EMS of </strong></span><a style="color: blue; cursor: pointer;" title="Vendor Business Address" contenteditable="false" data-item="fieldTag">&lt;vendor_business_address&gt;</a><span style="font-size: 24px;"><strong> </strong></span></p> <p> </p> <p><span style="font-size: 24px;"><strong>on this date </strong></span><a style="color: blue; cursor: pointer;" title="Bill Date" contenteditable="false" data-item="fieldTag">&lt;bill_date&gt;</a><span style="font-size: 24px;"><strong> </strong></span><br><br><span style="font-size: 24px;"><strong>for this bill </strong></span><a style="color: blue; cursor: pointer;" title="Bill Name" contenteditable="false" data-item="fieldTag">&lt;bill_name&gt;</a><span style="font-size: 24px;"><strong> </strong></span></p> <p><span style="font-size: 24px;"><strong>served this customer </strong></span><a style="color: blue; cursor: pointer;" title="Customer Name" contenteditable="false" data-item="fieldTag">&lt;customer_name&gt;</a><span style="font-size: 24px;"><strong> </strong></span></p> <p> </p> <p><a style="color: blue; cursor: pointer;" title="Claimant Signature" contenteditable="false" data-item="fieldTagSignature">&lt;claimant_signature&gt;</a><span style="font-size: 24px;"><strong> </strong></span></p> <p><span style="font-size: 24px;"><strong> Send On </strong></span><a style="color: blue; cursor: pointer;" title="Current Date" contenteditable="false" data-item="fieldTag">&lt;current_date&gt;</a><span style="font-size: 24px;"><strong> </strong></span></p>

pagebreak can accept css selectors, you should try to use :not(:first-child), :first-child to exclude to prevent the first page break