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"><vendor_business_address></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"><bill_date></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"><bill_name></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"><customer_name></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"><claimant_signature></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"><current_date></a><span style="font-size: 24px;"><strong> </strong></span></p>
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"><vendor_business_address></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"><bill_date></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"><bill_name></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"><customer_name></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"><claimant_signature></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"><current_date></a><span style="font-size: 24px;"><strong> </strong></span></p>