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...