jspdf with html2canvas, div is cut

I am trying to create/download pdf with jspdf using html2canvas. I have certain div made circle around and colored with some value inside. When I download pdf in certain cases this is cut. and is in 2 different pages partially as in image. I want the div to move to other page instead of cutting like this.

Code to download it is as following:

downloadPDF(): void {
const buttons = document.querySelectorAll('.button-content');
buttons.forEach((button) => {
(button as HTMLElement).style.display = 'none';
});

const content = document.getElementById('pdf-content');
if (content) {
html2canvas(content, { scale: 2, useCORS: true }).then((canvas) => {
const imgWidth = 210;
const pageHeight = 295;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
let heightLeft = imgHeight;

const doc = new jsPDF('p', 'mm', 'a4');
let position = 0;

doc.addImage(
canvas.toDataURL('image/png'),
'PNG',
0,
position,
imgWidth,
imgHeight,
);
heightLeft -= pageHeight;

while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(
canvas.toDataURL('image/png'),
'PNG',
0,
position,
imgWidth,
imgHeight,
);
heightLeft -= pageHeight;
}

doc.save('Maturity Assessment Result Report.pdf');

buttons.forEach((button) => {
(button as HTMLElement).style.display = 'inline-block';
});
});
}


}

Continue reading...