jsPDF is a Javascript library that lets you generate PDF files programmatically. It has no dependencies and it’s accessible from any device with a browser, so you can generate PDF files on the fly.
jsPDF is the only library out there that allows generating PDFs without having to install anything. You just write the code – this way it doesn’t matter what kind of environment you’re in: at work, at home, or on the go.
HTML to PDF is a tool that converts HTML files to PDF files automatically.
There are many advantages of HTML to PDF JavaScript conversion. The most important one is that it improves the readability of text in web pages as well as its appearance on paper. Another advantage of converting your web pages to PDF documents is that it can help you save money on printing costs.
Read Also: How to Convert HTML to PDF in PHP with fpdf
Converting web content into a clean, professional-looking document can be a tricky task but with the right tools, this process can be simplified and made much easier to complete for anyone without any coding skills.
First of all, you need to install jsPDF library:
npm install jspdf --save
You can also use CDN if you want.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>Create a function to generate PDF, Simple code to convert HTML to PDF it gets all content of #dataID and converts it to a pdf file with given options like margin, page size, etc.
function generate() {
var doc = new jsPDF("p", "pt", "a4", true);
var a4Width = Number(doc.internal.pageSize.getWidth());
doc.fromHTML($("#dataID").html(), 20, 0, {
pagesplit: true,
"width": (a4Width - 40) // for margin right
},
function(dispose) {
doc.save("PHPLift.pdf");
}
);
}
HTML:
<div id="dataID">
<h2>HTML Introduction</h2>
<!-- <img src="logo.jpg" alt="html logo" width="200px;" /> -->
<p>HTML is the standard markup language for creating Web pages.</p>
<h4>What is HTML?</h4>
<ul>
<li>HTML stands for Hyper Text Markup Language</li>
<li>HTML is the standard markup language for creating Web pages</li>
<li>HTML describes the structure of a Web page</li>
<li>HTML consists of a series of elements</li>
<li>HTML elements tell the browser how to display the content</li>
<li>HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.</li>
</ul>
<p>
<!-- It is a Paragraph tag for creating the paragraph -->
<b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and
applications. This language
is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
a flexible way for designing the
web pages along with the text.
</p>
HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag,
attributes and the text between them</i>.
</p>
</div>You can find all options here: https://raw.githack.com/MrRio/jsPDF/master/docs/jsPDF.html if you want to explore it more.
You can get extra plugins here: https://github.com/topics/jspdf-plugin
It’s a very simple and easy-to-use library you can implement on your website.
Complete Page Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML to PDF</title>
</head>
<body>
<div class="py-2 px-4">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick="generate()">Generate pdf</button>
<div id="dataID">
<h2>HTML Introduction</h2>
<!-- <img src="logo.jpg" alt="html logo" width="200px;" /> -->
<p>HTML is the standard markup language for creating Web pages.</p>
<h4>What is HTML?</h4>
<ul>
<li>HTML stands for Hyper Text Markup Language</li>
<li>HTML is the standard markup language for creating Web pages</li>
<li>HTML describes the structure of a Web page</li>
<li>HTML consists of a series of elements</li>
<li>HTML elements tell the browser how to display the content</li>
<li>HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.</li>
</ul>
<p>
<!-- It is a Paragraph tag for creating the paragraph -->
<b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and
applications. This language
is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
a flexible way for designing the
web pages along with the text.
</p>
HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag,
attributes and the text between them</i>.
</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script>
function generate() {
var doc = new jsPDF("p", "pt", "a4", true);
var a4Width = Number(doc.internal.pageSize.getWidth());
doc.fromHTML($("#dataID").html(), 20, 0, {
pagesplit: true,
"width": (a4Width - 40) // for margin right
},
function(dispose) {
doc.save("PHPLift.pdf");
}
);
}
</script>
</body>
</html>
A simple HTML to PDF Javascript Demo and Example
Conclusion
This example code will show you how to convert HTML to PDF using JavaScript. Without requiring a server-side script, you can add the Export To PDF functionality to your web page. You can customize the jsPDF configuration options to enhance the PDF creation functionality. Get all the files you need, including the jsPDF JavaScript Library.
1 Comments
aqel
August 3, 2021 at 10:24 amthanks, too much.
what about Arabic Language Support pdf export