Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Generate a PDF from an HTML Webpage?
In this article, we are going to explore the conversion of required HTML content into a PDF file. Many a time we have to read and accept the Terms & Conditions, a better way is to download the PDF file read it in spare time, and then accept it. Therefore, for achieving this we can make use of converting the content into a PDF file.
We also need some content to be stored in a PDF file to be used later on for various purposes. The most common use includes downloading chapters, texts, thesis, etc.
The above conversion can be achieved in 2 ways −
Printing the specific webpage and saving it as a PDF
Using the jsPDF library
We are going to explore both ways in the below examples
Example 1: Printing the specific webpage and saving it as a PDF.
In the below example, we will be exploring the 1st way and printing the specific webpage into a PDF. This is similar to default printing and saving the file as a PDF.
The steps to achieve this are as follows −
Open a new window using the window.open() method
Writing the innerHTML for the div tag inside the window
Printing and closing the window
Example
#Filename: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Generate PDF</title>
<style>
.container {
position: fixed;
top: 20%;
left: 28%;
border-radius: 7px;
}
.card {
box-sizing: content-box;
width: 300px;
height: 400px;
padding: 30px;
border: 1px solid black;
font-style: sans-serif;
background-color: #f0f0f0;
}
h2 {
text-align: center;
color: #24650b;
}
</style>
</head>
<body>
<div class="container">
<button id="pdfButton"><b>Click here to Generate PDF</b></button>
<div class="card" id="generatePDF">
<h2>Welcome to Tutorials Point</h2>
<ul>
<li>
<h4> We are going to generate a pdf from the area inside the box</h4>
</li>
<li>
<h4> About Company </h4>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the
comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</p>
</li>
</ul>
</div>
</div>
<script>
var button = document.getElementById("pdfButton");
var makepdf = document.getElementById("generatePDF");
button.addEventListener("click", function () {
var mywindow = window.open("", "PRINT", "height=600,width=600");
mywindow.document.write(makepdf.innerHTML);
mywindow.document.close();
mywindow.focus();
mywindow.print();
return true;
});
</script>
</body>
</html>Output
Example 2: Using jsPDF Library
The other way is to use the PDF library provided by the JS i.e. jsPDF library. The steps to use this library are as follows −
Include the CDN link to jsPDF in the <head> tag of the HTML to import the library.
Now we can use the above library to use its functions. We will use the fromHTML method to create PDF from HTML.
Save the file using the save() function once the file is generated.
Example 2
#Filename: index.html
<!DOCTYPE html>
<html>
<head>
<title>Generate PDF using jsPDF Library</title>
<!--JSPDF CDN-->
<script src= "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js">
</script>
<style>
.container {
position: fixed;
top: 20%;
left: 28%;
border-radius: 7px;
}
#generatePdf {
box-sizing: content-box;
width: 300px;
height: 100px;
padding: 30px;
border: 1px solid black;
font-style: sans-serif;
background-color: #f0f0f0;
}
#pdfButton {
background-color: #4caf50;
border-radius: 5px;
margin-left: 300px;
margin-bottom: 5px;
color: white;
}
h2 {
text-align: center;
color: #24650b;
}
</style>
</head>
<body>
<div class="container">
<button id="pdfButton">Generate PDF</button>
<div id="generatePdf">
<h2>Welcome to Tutorials Point</h2>
<ul>
<li>
<h4> The following content will be downloaded as PDF.</h4>
</li>
<li>
<h4>About Company</h4>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
<p>The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</p>
</li>
</ul>
</div>
</div>
<script>
var button = document.getElementById("pdfButton");
button.addEventListener("click", function () {
var doc = new jsPDF("p", "mm", [300, 300]);
var makePDF = document.querySelector("#generatePdf");
// fromHTML Method
doc.fromHTML(makePDF);
doc.save("output.pdf");
});
</script>
</body>
</html>Output
16K+ Views
