Estoy realizando una transformación de mi HTML a PDF, pero tengo un problema al hacer el salto de página, el div se me corta al saltar de una página a otra, tal y como se aprecia en la imagen
El código que actualmente estoy utilizando para convetirlo a PDF es el siguiente.
generarPDF1() {
var data = document.getElementById('paraPDF');
html2canvas(data).then(canvas => {
var imgWidth = 200;
var pageHeight = 190;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
const contentDataURL = canvas.toDataURL('image/png', 10)
var options = {
size: '70px',
background: '#fff',
pagesplit: true,
};
let pdf = new jsPDF('p', 'mm', 'a4', 1); // A4 size page of PDF
var position = 0;
var width = pdf.internal.pageSize.width;
var height = pdf.internal.pageSize.height;
pdf.addImage(contentDataURL, 'PNG', 2, position, imgWidth, imgHeight, options)
pdf.addImage(contentDataURL, 'PNG', 2, position, imgWidth, imgHeight, options);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
pdf.addPage();
pdf.addImage(contentDataURL, 'PNG', 2, position, imgWidth, imgHeight, options);
heightLeft -= pageHeight;
}
pdf.save('informe.pdf'); // Generated PDF
});
}
<div style="height: 0px; overflow-x: scroll;">
<div id="paraPDF">
<div class="row impresion">
<div class="col-md-12 contenedor-card mb-4" *ngFor="let fcita of citas | filter:filterHora:filterOtros:filterTerapeuta:filterPacientes:filterFecha">
<div class="header-impresion">
{{fcita.historia}} - {{fcita.nombre_paciente}} {{fcita.apellidos_paciente}}
</div>
<div class="informacion-impresion">
<ul>
<li><b>Fecha:</b> {{fcita.fecha}}</li>
<li><b>Hora:</b> {{fcita.hora}}</li>
<li><b>Estado:</b> {{fcita.estado}}</li>
<li><b>Información adicional:</b> {{fcita.otros}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>