jsPDF PDF de varias páginas con procesador HTML

Intenta entender el código bien previamente a adaptarlo a tu trabajo y si ttienes algo que aportar puedes decirlo en los comentarios.

Solución:

Tengo el mismo problema de trabajo. Buscando en MrRio github encontré esto: https://github.com/MrRio/jsPDF/issues/101

Básicamente, siempre debe verificar el tamaño real de la página antes de agregar contenido nuevo

doc = new jsPdf();
...
pageHeight= doc.internal.pageSize.height;

// Before adding new content
y = 500 // Height position of new content
if (y >= pageHeight)

  doc.addPage();
  y = 0 // Restart height position

doc.text(x, y, "value");

Aquí hay un ejemplo que usa html2canvas y jspdf, aunque no importa cómo genere el lienzo; solo usaremos la altura de eso como el punto de interrupción en un for loopen el que se crea una nueva página y se le agrega contenido.

después del bucle for, se guarda el pdf.

function makePDF() 

       var quotes = document.getElementById('container-fluid');
       html2canvas(quotes)
      .then((canvas) => 
            //! MAKE YOUR PDF
            var pdf = new jsPDF('p', 'pt', 'letter');

            for (var i = 0; i <= quotes.clientHeight/980; i++) 
                //! This is all just html2canvas stuff
                var srcImg  = canvas;
                var sX      = 0;
                var sY      = 980*i; // start 980 pixels down for every new page
                var sWidth  = 900;
                var sHeight = 980;
                var dX      = 0;
                var dY      = 0;
                var dWidth  = 900;
                var dHeight = 980;

                window.onePageCanvas = document.createElement("canvas");
                onePageCanvas.setAttribute('width', 900);
                onePageCanvas.setAttribute('height', 980);
                var ctx = onePageCanvas.getContext('2d');
                // details on this usage of this function: 
                // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing
                ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);

                // document.body.appendChild(canvas);
                var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);

                var width         = onePageCanvas.width;
                var height        = onePageCanvas.clientHeight;

                //! If we're on anything other than the first page,
                // add another page
                if (i > 0) 
                    pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)
                
                //! now we declare that we're working on that page
                pdf.setPage(i+1);
                //! now we add content to that page!
                pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62));

            
            //! after the for loop is finished running, we save the pdf.
            pdf.save('Test.pdf');
        
      );
    }

Encontré la solución en esta página: https://github.com/MrRio/jsPDF/issues/434 Del usuario: wangzhixuan

Copio la solución aquí: // supongamos que su imagen ya está en un lienzo

      var imgData = canvas.toDataURL('image/png');

      /*
      Here are the numbers (paper width and height) that I found to work. 
      It still creates a little overlap part between the pages, but good enough for me.
      if you can find an official number from jsPDF, use them.
      */
      var imgWidth = 210; 
      var pageHeight = 295;  
      var imgHeight = canvas.height * imgWidth / canvas.width;
      var heightLeft = imgHeight;

      var doc = new jsPDF('p', 'mm');
      var position = 0;

      doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;

      while (heightLeft >= 0) 
        position = heightLeft - imgHeight;
        doc.addPage();
        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      
      doc.save( 'file.pdf');

Sección de Reseñas y Valoraciones

Si para ti ha resultado provechoso este post, agradeceríamos que lo compartas con el resto entusiastas de la programación de esta manera nos ayudas a extender esta información.

---

---

Utiliza Nuestro Buscador