Page break issue with html2pdf.js

I am using html2pdf.js for pdf previewing the dynamic html code from the text editor in angular v17. Here is the code I am using for previewing the pdf

generatePDF() {
this.replacetext = this.replacetext.replaceAll('text-align: right','text-align: right !important')
this.replacetext = this.replacetext.replaceAll('text-align: center','text-align: center !important')
this.replacetext = this.replacetext.replaceAll('text-align: left','text-align: left !important')
const element = document.createElement('div');
//element.innerHTML = this.replacetext;
element.innerHTML = `
<style>
.page-break {
page-break-before: always;
}

.avoid-page-break {
page-break-inside: avoid;
}

.scale-down-height {
height: auto;
}

.scale-down-height tr {
line-height: 0.75 !important; /* Adjust the scale as needed */
font-size: 0.4em !important; /* Adjust the scale as needed */
}

#scorecardtablemodal {
border-collapse: collapse !important;
width: 100% !important;
page-break-inside: avoid !important;
border-top: none !important; /* Remove top border */
}

#scorecardtablemodal, #scorecardtablemodal th, #scorecardtablemodal td {
border: 0.5px solid black !important; /* Solid border color for specific table */
}

</style>
${this.replacetext}
`;


// Append the element to the body to measure its dimensions
document.body.appendChild(element);

// Apply scaling to large tables
const tables = element.querySelectorAll('table');
tables.forEach(table => {
if (table.offsetHeight > 900) { // Adjust the height threshold as needed
table.classList.add('scale-down-height');
}
});

// Remove the element from the body after measuring
document.body.removeChild(element);

const options = {
margin: 0.2,
filename: 'document.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' },
pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }
};

html2pdf().from(element).set(options).toPdf().get('pdf').then((pdf) => {
const totalPages = pdf.internal.getNumberOfPages();
for (let i = 1; i <= totalPages; i++) {
pdf.setPage(i);
pdf.setFontSize(5);
pdf.setTextColor(150);
pdf.text(`Page ${i} of ${totalPages}`, pdf.internal.pageSize.getWidth() - 0.38, pdf.internal.pageSize.getHeight() - 0.2);

const pdfType = (this.newReview.lastReviewDt != '' && this.newReview.lastReviewDt != null) ? 'APPROVED' : 'DRAFT';
pdf.setFontSize(40);
pdf.setTextColor(150);
// Save the current graphics state
pdf.saveGraphicsState();

// Translate and rotate the context
pdf.setTextColor(150);
pdf.setFontSize(15);
pdf.setFont("arial", "bold");
pdf.setGState(pdf.GState({ opacity: 0.3 }));
pdf.text(pdfType, pdf.internal.pageSize.getWidth() - 0.7, pdf.internal.pageSize.getHeight() - 0.2, {
angle: 0,
align: 'right'
});

// Restore the graphics state
pdf.restoreGraphicsState();
}
}).output('blob').then((pdfBlob) => {
const pdfUrl = URL.createObjectURL(pdfBlob);
const iframe = document.createElement('iframe');
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.src = pdfUrl;


this.modalService.open(this.srtpreview, { ariaLabelledBy: 'modal-basic-title', size: 'srt' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});

// Delay to ensure the modal is fully rendered
setTimeout(() => {
const previewContainer = document.getElementById('pdfoutput');

if (previewContainer) {
previewContainer.innerHTML = '';
previewContainer.appendChild(iframe);
console.log('Iframe appended to preview container');
} else {
console.error('Preview container not found');
}
}, 500);
});
}


My goal is to ensure that the tables and other contents like image, screenshots not to be cut between the pages by using the pagebreak option

pagebreak: { mode: ['avoid-all', 'css', 'legacy']


But the issue I am facing is the top part of the table(like border) is getting cut and going to the previous page.

Here is the screenshot below



And the intensity of the line is getting increased when the content is pushed to further pages(like the table content is getting cut between pages)



I have tried multiple ways but not able to fix this issue. Please let me know how to address this issue.

Continue reading...