jsPDF Tutorial to Add Multiple Pages inside PDF Document in Browser Using Javascript

Welcome folks today in this blog post we will be adding multiple pages inside pdf document in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://parall.ax/parallax/js/jspdf.js"></script>
<body>
  <button onclick="generatePDF()">Generate PDF</button>
</body>

<body>

<button onclick="generatePDF()">Generate PDF</button>

</body>

As you can see in the above html code we are including the jspdf cdn and then we have the simple button to generate the pdf document.

We have binded a onclick event listener. We now have to define the generatePDF() method which is as follows

 function generatePDF() {
   
        
          var doc = new jsPDF('p', 'pt', 'letter');
          
          doc.text("this is the first page",10,50)
          doc.addPage()
          doc.text("this is the second page",10,50)
          doc.addPage()
          doc.save("output.pdf")
      }

function generatePDF() {

var doc = new jsPDF('p', 'pt', 'letter');

doc.text("this is the first page",10,50)

doc.addPage()

doc.text("this is the second page",10,50)

doc.addPage()

doc.save("output.pdf")

}

As you can see in the above javascript code we are making a new object of the jsPDF class and then we add the text using the text() method and now add to add a new page inside the pdf document using the addPage() method. And after that we need to save the pdf document using the save() method