eKoopmans / html2pdf.js

Client-side HTML-to-PDF rendering using pure JS.
MIT License
3.92k stars 1.37k forks source link

While using pagebreak avoid-all creates a blank first page #672

Open zameelnp opened 6 months ago

zameelnp commented 6 months ago

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>

zaosoula commented 5 months ago

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