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:

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.
doc.save('filename.pdf');

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

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

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

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

Code

HTML Code

JavaScript file

function demoPDF() {
var doc = new jsPDF();
doc.text(10, 10, 'Hello everybody');
doc.text(10, 20, 'My name is');
doc.text(10, 40, 'Contact me at');
doc.text(10, 30, 'I have just created a simple pdf using jspdf');
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

2. PDF output

Recommended Free Ebook

Frontend Developer Interview Questions and Answers