multipagejspdf

jsPDF multi page PDF with HTML renderer


I am using jsPDF in my site to generate PDFs. But now I have multiple DIVs to print in a single PDF. which may take 2 to 3 pages.

For example:

<div id="part1">
  content
</div>

<div id="part2">
  content
</div>

<div id="part2">
   content
</div>

my JS code

    function formtoPDF() {
      jsPDF.API.mymethod = function() {
        // 'this' will be ref to internal API object. see jsPDF source
        // , so you can refer to built-in methods like so:
        //   this.line(....)
        //   this.text(....)
      };
      var doc = new jsPDF();
      doc.mymethod();
      var pdfPart1 = jQuery('#genPDFpart1');
      var pdfPart2 = jQuery(".ltinerary");
      var pdfPart3 = jQuery("#domElementHTML");
      var specialElementHandlers = {
        '#loadVar': function(element, renderer) {
          return true;
        }
      };
      doc.fromHTML(pdfPart1.html() + pdfPart3.html() + pdfPart3.html(), 15, 15, {
        'width': 170,
        'elementHandlers': specialElementHandlers
      });
      doc.output('save', 'Download.pdf');
    }

What's the solution for this?


Solution

  • I have the same working issue. Searching in MrRio github I found this: https://github.com/MrRio/jsPDF/issues/101

    Basically, you have to check the actual page size always before adding new content

    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");