10 TIPs - To Become a Good Developer/Programmer
Why Join
Become a member
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
TECHNOLOGIES
ANSWERS
LEARN
NEWS
BLOGS
VIDEOS
INTERVIEW PREP
BOOKS
EVENTS
Training
Live
JOBS
MORE
CAREER
MEMBERS
Creating PDF From HTML Using JSPDF
Gaurav Katara
Updated date
Apr 30, 2020
281.8k
0
9
This article explains how to create PDF from HTML using JSPDF.
facebook
twitter
linkedIn
Reddit
WhatsApp
Email
Bookmark
Print
Other Artcile
Expand
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
Next Recommended Reading
FEATURED ARTICLES
View All
TRENDING UP
01
Creating Search Feature In Blazor Server Grid
02
Log Correlation In Microservices
03
Create A PowerApps Component Framework (PCFx ) Using Custom Code In PowerAPPs
04
Import PowerApps Component Framework (PCFx ) Into Model Driven PowerApps
05
Fundamentals Of Software Architecture
06
Creating Various Layouts For Different Razor Pages In Blazor
07
Safest Way To Convert String To Int In C#
08
Top Three VS Code Extensions Worth The Money
09
How To Migrate From .NET Core 3.1 To .NET 6.0
10
Web3 Developer Salary Soars In 2022
View All
Learn JavaScript
Challenge yourself
Blockchain Basics Skill
Get Certified
Python Developer