Creating PDF From HTML Using JSPDF

JSPDF is an open-source library for generating PDF documents using nothing but JavaScript.

It uses various functions to create various elements of PDF pages.

For example:

  1. doc.text(x, y, 'string');

    Will print the string given in single quotes starting from the position given as point (x,y).

    Instead of using a string, we can select a tag from a HTML page using JavaScript or jQuery.
     
  2. doc.save('filename.pdf');

    Will save the document with the name "filename".
     
  3. doc.addPage();

    Gets an extra page in the PDF file.
     
  4. doc.setFontType('stylename');

    Changes the style of the font such as to italic or bold.
     
  5. doc.setFont('fontfaceName');

    Provides the font face, like Times New Roman, Comic, Arial and so on.

Code

HTML Code

  1. <html>  
  2. <head>  
  3.     <title>Example of jsPDF</title>  
  4.     <script type="text/javascript" src="jquery-1.7.1.min.js"></script>  
  5.     <script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js"></script>  
  6.     <script type="text/javascript" src="jspdf.debug.js"></script>  
  7.     <script type="text/javascript" src="basic.js"></script>  
  8. </head>  
  9. <body>  
  10.     <img src="html.jpg" align="left">  
  11.     <img src="download.jpg" align="center" style="margin-left: 170px">  
  12.     <img src="pdf.png" align="right" style="margin-right: 250px">  
  13.     <div style="margin-top: 200px">  
  14.         <b>  
  15.             <label style="color: blue">  
  16.                 First Name</label></b>  
  17.         <input type="text" id="fname" style="margin-left: 24px"><br>  
  18.         <br>  
  19.         <b>  
  20.             <label style="color: blue">  
  21.                 Last Name</label></b>  
  22.         <input type="text" id="lname" style="margin-left: 27px"><br>  
  23.         <br>  
  24.         <b>  
  25.             <label style="color: blue">  
  26.                 Email</label></b>  
  27.         <input type="text" id="email" style="margin-left: 60px"><br>  
  28.         <br>  
  29.         <button onclick="demoPDF()">  
  30.             want pdf</button>  
  31.     </div>  
  32. </body>  
  33. </html> 

JavaScript file

  1. function demoPDF() {  
  2.    var doc = new jsPDF();  
  3.    doc.text(10, 10, 'Hello everybody');  
  4.    doc.text(10, 20, 'My name is');  
  5.    doc.text(10, 40, 'Contact me at');  
  6.    doc.text(10, 30, 'I have just created a simple pdf using jspdf');  
  7.    doc.setFont("times");  
  8.    doc.setFontType("italic");  
  9.    doc.text(50, 40, document.getElementById("email").value); //append email id in pdf  
  10.    doc.setFontType("bold");  
  11.    doc.setTextColor(255, 0, 0); //set font color to red  
  12.    doc.text(60, 20, document.getElementById("fname").value); //append first name in pdf  
  13.    doc.text(100, 20, document.getElementById("lname").value); //append last name in pdf  
  14.    doc.addPage(); // add new page in pdf  
  15.    doc.setTextColor(165, 0, 0);  
  16.    doc.text(10, 20, 'extra page to write');  
  17.    doc.save('katara.pdf'); // Save the PDF with name "katara"...  

Output

1. HTML page

HTML page

2. PDF output

HTML page
 
Pdf output