Creating PDF From HTML Using JSPDF

Gaurav Katara
Jul 02 2014
Article

9
0
200.6k

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 a 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');

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, 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

C# Corner

Creating PDF From HTML Using JSPDF

TRENDING UP