Post
Ask Question

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

<html>    
<head>    
    <title>Example of jsPDF</title>    
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>    
    <script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js"></script>    
    <script type="text/javascript" src="jspdf.debug.js"></script>    
    <script type="text/javascript" src="basic.js"></script>    
</head>    
<body>    
    <img src="html.jpg" align="left">    
    <img src="download.jpg" align="center" style="margin-left: 170px">    
    <img src="pdf.png" align="right" style="margin-right: 250px">    
    <div style="margin-top: 200px">    
        <b>
            <label style="color: blue">
                First Name
            </label>
        </b>    
        <input type="text" id="fname" style="margin-left: 24px"><br>    
        <br>    
        <b>
            <label style="color: blue">
                Last Name
            </label>
        </b>    
        <input type="text" id="lname" style="margin-left: 27px"><br>    
        <br>    
        <b>
            <label style="color: blue">
                Email
            </label>
        </b>    
        <input type="text" id="email" style="margin-left: 60px"><br>    
        <br>    
        <button onclick="demoPDF()">
            want pdf
        </button>    
    </div>    
</body>    
</html>

JavaScript file

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

Output

1. HTML page

HTML page

2. PDF output

PDF Output

Output


Similar Articles