jsPDF: JSPDF - Page Split breaks the content after it's page size exceeds

I know its very late to add the comment now. but if any 1 comes across this issue can use the following.

pdf.addHtml doesnot work if there are svg images on the web page… I copy the solution here: // suppose your picture is already in a canvas 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;

enter code here

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’);`

I made this for Angular 7 CLI with html2canvas and jspdf createpdf() { var data = document.getElementById(‘content’); var date = new Date(); html2canvas(data).then(canvas => { var imgWidth = 210; var pageHeight = 295; var imgHeight = canvas.height * imgWidth / canvas.width; var heightLeft = imgHeight;

  //enter code here
  const imgData = canvas.toDataURL('image/png')

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

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

  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    doc.addPage();
    doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight + 15);
    heightLeft -= pageHeight;
  }

doc.save (‘Visiometria_’+this.id+ ‘_’+date.getTime()+‘.pdf’)

});

}

I am generating an html table structure … which will only store images but the images are cut off. how can i solve that?

Adding 15(or any num) not quite correct, because you dont change heightLeft. With this decision content on last page may not fit in last page, and new page will not be created, because heightLeft is already < 0

I made this for Angular 7 CLI with html2canvas and jspdf createpdf() { var data = document.getElementById(‘content’); var date = new Date(); html2canvas(data).then(canvas => { var imgWidth = 210; var pageHeight = 295; var imgHeight = canvas.height * imgWidth / canvas.width; var heightLeft = imgHeight;

  //enter code here
  const imgData = canvas.toDataURL('image/png')

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

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

  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    doc.addPage();
    doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight + 15);
    heightLeft -= pageHeight;
  }

doc.save (‘Visiometria_’+this.id+ ‘_’+date.getTime()+‘.pdf’)

});

}

solution for image cut off

const handleExportPDF = async () => {
  const data = document.getElementById('pdf-content');
  const pageHeight = 295; // Set the desired height of each page in the PDF

  const doc = new jsPDF('p', 'mm');
  const docWidth = doc.internal.pageSize.getWidth();

  let positionY = 0;
  let currentPage = 1;

  const addNewPage = () => {
    doc.addPage();
    positionY = 0;
    currentPage++;
  };

  const renderContent = (child) => {
    return new Promise((resolve) => {
      html2canvas(child).then((canvas) => {
        const imgData = canvas.toDataURL('image/jpeg', 1.0);
        const imgHeight = (canvas.height * docWidth) / canvas.width;

        if (positionY + imgHeight > pageHeight) {
          addNewPage();
        }

        doc.addImage(imgData, 'JPEG', 0, positionY, docWidth, imgHeight);
        positionY += imgHeight;

        resolve();
      });
    });
  };

  const children = Array.from(data.children);

  for (let i = 0; i < children.length; i++) {
    const child = children[i];

    await renderContent(child);
  }

  doc.save('Download.pdf');
};

Hi

we need to fit the content based on resolution then it will work. We need to change height width based on resolution

On Sun, May 29, 2022 at 3:22 PM Nandkishorkumar @.***> wrote:

[image: image] https://user-images.githubusercontent.com/12828174/149950458-aad04078-d7e9-4a76-a4b4-46fb74317396.png Still, i am getting this issue on page split, please help

canvas.getContext(‘2d’); var imgWidth = 210; var pageHeight = 295; var imgHeight = canvas.height * imgWidth / canvas.width; var heightLeft = imgHeight;

        // var doc = new jsPDF('p', 'mm');
        var doc = new jsPDF('p', 'mm', "a4");
        var position = 0;
        var imgData = canvas.toDataURL("image/jpeg", 1.0);
        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight + 15);
        heightLeft -= pageHeight;

        while (heightLeft >= 0) {
            position = heightLeft - imgHeight;
            doc.addPage();
            doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight + 15);
            heightLeft -= pageHeight;
        }
        doc.save("text.pdf");

hey, can you help me with how you solve this issue? I am facing this issue and not getting proper documentation and help. i am using jspdf.html(callback) to convert my HTML to pdf. please reply asap.

— Reply to this email directly, view it on GitHub https://github.com/parallax/jsPDF/issues/650#issuecomment-1140414689, or unsubscribe https://github.com/notifications/unsubscribe-auth/AESNWMKSCVPQCEFL5ZEHMEDVMM47TANCNFSM4BWZ443Q . You are receiving this because you commented.Message ID: @.***>

This is working for me.

      var imgData = canvas.toDataURL('image/png');
      var imgWidth = 210;
      var pageHeight = 295;
      var imgHeight = canvas.height * imgWidth / canvas.width;
      var heightLeft = imgHeight;

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

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

      while (heightLeft >= 0) {
          position = heightLeft - imgHeight;
          doc.addPage();
          doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight+10);
          heightLeft -= pageHeight;
      }
    doc.save("Dashboard.pdf");