I'm using html2pdf.js in an Angular app in order to save large document (CSS formated HTML with images) to a PDF. I need to force page breaks at some points (before each field having newPage class). This is simplified version of my code:
@ViewChild('report', { static: false }) reportElement: ElementRef;
const opt = {
filename: 'test.pdf',
image: {type: 'jpeg', quality: 0.98},
html2canvas: {scale: 3},
pagebreak: {before: '.newPage', avoid: ['h2', 'h3', 'h4', '.field']},
jsPDF: {unit: 'mm', format: 'a4', orientation: 'portrait'}
};
html2pdf().from(this.reportElement.nativeElement).set(opt).save();
This works fine, but there is an issue with "soft" (non-forced) page breaks after a few pages in PDF - page breaks are being "missed" by a few pixels, getting worse at each upcoming page. The issue was reported on package's github, but the proposed dirty fix is not applicable to the current package version.
Any idea how to bypass this issue?