angular - ¿Cómo hacer que un lienzo se divida en 2 páginas o más sin que se corte?
Tengo un PDF de factura que contiene filas de tabla que pueden aumentar; sé exactamente cómo agregar páginas con jsPDF, pero el problema es que mi imagen se corta y esto es realmente molesto cuando tienes contenido dinámico para imprimir. ¿Cómo dividir mi imagen de canvas sin que se corte? ¿Existe una solución? PD: no quiero que mi canvas quepa completamente en una página de PDF porque puedo perder la calidad de mi imagen y se vuelve abarrotada, especialmente cuando el usuario tiene muchas líneas de factura.
Aquí está una captura de pantalla de mi archivo PDF resultante:
TypeScript :
public convertToPDF() {
const data = document.getElementById('contentToConvert');
html2canvas(data).then(canvas => {
this.imgWidth = 200;
this.imgHeight = (canvas.height * this.imgWidth / canvas.width);
this.pageHeight = 295;
this.heightLeft = this.imgHeight;
const contentDataURL = canvas.toDataURL('image/png');
const pdf = new jspdf('p', 'mm', 'a4', true);
this.position = 5;
pdf.addImage(contentDataURL, 'PNG', 5, this.position, this.imgWidth, this.imgHeight, '', 'FAST');
this.heightLeft -= this.pageHeight;
while (this.heightLeft >= 0) {
this.position = this.heightLeft - this.imgHeight;
pdf.addPage();
pdf.addImage(contentDataURL, 'PNG', 5, this.position, this.imgWidth, this.imgHeight);
this.heightLeft -= this.pageHeight;
}
pdf.save('Facture' + '-' + this.client.nomRepresentant + this.facture.dateFacturation.format('YYYYMM') + '.pdf');
});
}
