TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
C# Corner
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Creating PDF From HTML Using JSPDF
Gaurav Katara
Apr 30, 2020
299.7k
0
10
facebook
twitter
linkedIn
Reddit
WhatsApp
Email
Print
Other Artcile
This article explains how to create PDF from HTML using JSPDF.
jspdf.rar
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
<
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
Creating PDF from HTML
JavaScript file
JSPDF
Open-Source Library JSPDF
Recommended Free Ebook
JavaScript Interview Q & A
Download Now!
Similar Articles