Búsqueda de sitios web

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');
    });
}