Necesito imprimir unas imágenes en un pdf con una breve descripción de cada una de ellas. Veo que en la parte de abajo los corta

Aquí está mi código:

 async addImageToPdf(elementId: string) { const thumbnailsHtml = document.getElementById(elementId) as HTMLElement; await this.sleep(500); const canvas = await html2canvas(thumbnailsHtml, { windowWidth: 1200, windowHeight: 1200, scale: 1, scrollX: 0, scrollY: 0, allowTaint: true, useCORS: true, }); const imgData = canvas.toDataURL("image/jpeg", 0.9); await this.sleep(500); const imgProps = this.pdf.getImageProperties(imgData); const pdfWidth = 210 /* this.pdf.internal.pageSize.getWidth() */; const pageHeight = this.pdf.internal.pageSize.getHeight(); const imgHeight = (imgProps.height * pdfWidth) / 1161 /* imgProps.width */; var heightLeft = imgHeight; var position = 0; this.pdf.addImage( imgData, "JPEG", 10, // Position of image from left and right 8, // Position of image from top and bottom pdfWidth, imgHeight, undefined, "FAST" ); heightLeft -= pageHeight; while (heightLeft >= 0) { position = heightLeft - imgHeight; this.pdf.addPage(); this.pdf.addImage( imgData, "JPEG", 5, position + 5, pdfWidth, imgHeight, undefined, "FAST" ); heightLeft -= pageHeight; } }

Esto proviene de una plantilla de Vue que recorre todas las imágenes almacenadas en una matriz.

¿Hay alguna forma de establecer una cantidad X de imágenes por página para evitar que esto suceda?