In most web-based projects or applications, we need report generation for showing some relevant data which includes PDF conversion. There are many PDF generation tools available from raw HTML data, CSV, or any database available. The jsPDF library is one of the generation tools commonly used in web applications.
In this article, we will learn how to generate PDF files or convert HTML documents using the client-side JavaScript jsPDF library. The jsPDF can be imported just like any other 3rd party library.
Approach: You need to download the CDN links or libraries from the jsPDF Github link and include them in your HTML code by using the following links and following similar code patterns given in the examples below.
CDN links: The following links are used in the following codes for pdf generation.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
Instantiate and use the jsPDF class according to your need as shown in the following examples.
$pdf=new jsPDF();
Example 1: The following code demonstrates the simple generation of a PDF file using an HTML button and JavaScript function. The jsPDF() object is instantiated in that function which helps in saving the text “Hello world” and saving it in a new PDF file.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title> jsPDF - Create PDFs with HTML5 JavaScript Library </title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <script src= </script> <script src= </script></head><body> <h2 style="color:green"> neveropen </h2> <h3> Generate PDF file using jsPDF library </h3> <div class="container"> <input type="button" value="Create PDF" onclick="generatePDF()"> </div> <script type="text/javascript"> function generatePDF() { const { jsPDF } = window.jspdf; const doc = new jsPDF(); doc.text("Hello world!", 100, 100); doc.save("newFile.pdf"); } </script> </body></html> |
Output:
How to generate PDF file using jsPDF library?
newFile.pdf: The following pdf file is the result of the above code which is downloaded.
How to generate PDF file using jsPDF library?
Example 2: The following example demonstrates the conversion of the HTML document to a PDF file with the help of the JavaScript function and jsPDF library. The required options in the method are set as per the need or requirement. Refer to the output for a better understanding.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title> jsPDF - Create PDFs with HTML5 JavaScript Library </title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <script src= </script> <script src= </script> <script src= </script></head><body> <h2 style="color:green">neveropen</h2> <h3>HTML to canvas using jsPDF library</h3> <div class="container"> <input type="button" value="Convert HTML to PDF" onclick="convertHTMLtoPDF()"> <div id="divID"> <div class=""> <h1>Learning Computer Science</h1> <p class=""> CPP:<br />My first implementation was in this </p> <p class=""> ALGO:<br />Algorithms are fun </p> <p class=""> TYPESCRIPT:<br />New technology </p> <p class=""> JAVASCRIPT:<br />Client side programming </p> </div> </div> </div> <!-- /container --> <script type="text/javascript"> function convertHTMLtoPDF() { const { jsPDF } = window.jspdf; let doc = new jsPDF('l', 'mm', [1500, 1400]); let pdfjs = document.querySelector('#divID'); doc.html(pdfjs, { callback: function(doc) { doc.save("newpdf.pdf"); }, x: 12, y: 12 }); } </script> </body></html> |
Output:
How to generate PDF file using jsPDF library?
newpdf.pdf: This is the downloaded pdf file from the above code.
How to generate PDF file using jsPDF library?
