Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Generate a PDF from an HTML Webpage?
Converting HTML content to PDF is a common requirement for web applications. This allows users to save content for offline reading, generate reports, or create downloadable documents.
There are two primary approaches to generate PDFs from HTML webpages:
Using the browser's native print functionality
Using JavaScript libraries like jsPDF
Method 1: Using Browser Print Functionality
This method leverages the browser's built-in print feature to create a PDF. It opens a new window with the content and triggers the print dialog.
Steps:
Open a new window using
window.open()Write the HTML content to the new window
Trigger the print dialog
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Generate PDF - Print Method</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-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h2 {
text-align: center;
color: #24650b;
}
#pdfButton {
background-color: #4caf50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</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 content inside this 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.</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("<html><head><title>PDF Content</title></head><body>");
mywindow.document.write(makepdf.innerHTML);
mywindow.document.write("</body></html>");
mywindow.document.close();
mywindow.focus();
mywindow.print();
return true;
});
</script>
</body>
</html>
Method 2: Using jsPDF Library
The jsPDF library provides more control over PDF generation. It allows you to programmatically create PDFs with custom formatting and styling.
Steps:
Include the jsPDF library via CDN
Create a new jsPDF instance
Use the
html()method to convert HTML to PDFSave the generated PDF file
Example
<!DOCTYPE html>
<html>
<head>
<title>Generate PDF using jsPDF Library</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<style>
.container {
position: fixed;
top: 20%;
left: 28%;
border-radius: 7px;
}
#generatePdf {
box-sizing: content-box;
width: 300px;
height: 200px;
padding: 30px;
border: 1px solid black;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
#pdfButton {
background-color: #4caf50;
border-radius: 5px;
margin-left: 300px;
margin-bottom: 5px;
color: white;
padding: 10px 15px;
border: none;
cursor: pointer;
}
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.</p>
</li>
</ul>
</div>
</div>
<script>
var button = document.getElementById("pdfButton");
button.addEventListener("click", function () {
const { jsPDF } = window.jspdf;
var doc = new jsPDF("p", "mm", "a4");
var makePDF = document.querySelector("#generatePdf");
doc.html(makePDF, {
callback: function (doc) {
doc.save("tutorialspoint-content.pdf");
},
x: 10,
y: 10
});
});
</script>
</body>
</html>
Comparison
| Method | Advantages | Disadvantages |
|---|---|---|
| Browser Print | No external libraries, works offline | Limited styling control, requires user interaction |
| jsPDF Library | Programmatic control, better formatting | Requires external library, larger file size |
Key Points
The browser print method is simpler but requires user interaction to save as PDF
jsPDF provides more control and can automatically save files
For complex layouts, consider using html2canvas with jsPDF for better rendering
Always test PDF generation across different browsers for consistency
Conclusion
Both methods offer viable solutions for PDF generation. Use the browser print method for simple requirements, and jsPDF for applications needing programmatic control and automatic file downloads.
19K+ Views
