<button class="print" (click)="generatePDF()">Generate PDF</button>
Code to Generate PDF
generatePDF(): void {
const element = document.getElementById('mainPrint') as HTMLElement;
const imgWidth = 210;
const pageHeight = 295;
html2canvas(element, { scale: 2 }).then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
const imgHeight = (canvas.height * imgWidth) / canvas.width;
let heightLeft = imgHeight;
let position = 0;
while (heightLeft >= 0) {
position = heightLeft - pageHeight;
pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
if (heightLeft > 0) {
pdf.addPage();
}
}
pdf.save('page.pdf');
});
}
Upon clicking the "Generate PDF" button, a PDF is produced. However, the initial 4-5 pages are appearing blank, with content only showing from the subsequent pages but not fully displayed.