Creating PDF From HTML Using JSPDF

Introduction

 
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 an 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');
     
    It 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"...    
  18. }   
Output
 
1. HTML page
 
HTML page
 
2. PDF output
 
HTML page
 
Pdf output