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 do I export my HTML page as a PDF using JavaScript?
Converting HTML pages to PDF using JavaScript is a common requirement for web applications. Two popular libraries make this possible: jsPDF and html2pdf.js. These tools allow you to generate PDFs client-side, giving users downloadable documents from your web content.
Available Methods
jsPDF - More control over PDF creation with manual content addition
html2pdf.js - Automatic HTML-to-PDF conversion with minimal setup
Using jsPDF
jsPDF provides fine-grained control over PDF creation. You manually add content using its API methods, making it suitable when you need precise formatting and layout control.
Basic jsPDF Example
<!DOCTYPE html>
<html>
<head>
<title>jsPDF Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body>
<div id="content">
<h1>Sample Report</h1>
<p>This content will be converted to PDF using jsPDF.</p>
<p>Date: <span id="date"></span></p>
</div>
<button onclick="generatePDF()">Download PDF</button>
<script>
document.getElementById('date').textContent = new Date().toLocaleDateString();
function generatePDF() {
const element = document.getElementById('content');
html2canvas(element).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
const imgWidth = 210;
const pageHeight = 295;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
pdf.save('report.pdf');
});
}
</script>
</body>
</html>
Using html2pdf.js
html2pdf.js simplifies the conversion process by automatically handling HTML-to-PDF conversion with minimal configuration required.
Basic html2pdf.js Example
<!DOCTYPE html>
<html>
<head>
<title>html2pdf.js Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<style>
#content {
padding: 20px;
font-family: Arial, sans-serif;
}
.highlight {
background-color: #ffff99;
padding: 10px;
}
</style>
</head>
<body>
<div id="content">
<h1>Invoice #12345</h1>
<div class="highlight">
<p><strong>Total Amount: $250.00</strong></p>
</div>
<p>This invoice was generated on <span id="timestamp"></span></p>
<ul>
<li>Item 1: $100.00</li>
<li>Item 2: $150.00</li>
</ul>
</div>
<button onclick="downloadPDF()">Download Invoice</button>
<script>
document.getElementById('timestamp').textContent = new Date().toLocaleString();
function downloadPDF() {
const element = document.getElementById('content');
const options = {
margin: 1,
filename: 'invoice.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
html2pdf().set(options).from(element).save();
}
</script>
</body>
</html>
Comparison
| Feature | jsPDF | html2pdf.js |
|---|---|---|
| Setup Complexity | Medium - requires html2canvas | Simple - single library |
| Control Level | High - manual content placement | Low - automatic conversion |
| CSS Support | Limited - through canvas conversion | Good - preserves styling |
| File Size | Smaller library | Larger but more complete |
Advanced Configuration
Both libraries support advanced options for customizing PDF output:
// html2pdf.js advanced options
const options = {
margin: [0.5, 0.5, 0.5, 0.5],
filename: 'document.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: {
scale: 2,
useCORS: true,
letterRendering: true
},
jsPDF: {
unit: 'in',
format: 'a4',
orientation: 'portrait'
}
};
// jsPDF page formatting
const pdf = new jsPDF({
orientation: 'landscape',
unit: 'mm',
format: 'a4'
});
Conclusion
Choose html2pdf.js for quick HTML-to-PDF conversion with good CSS support, or jsPDF when you need precise control over PDF layout and content. Both libraries effectively enable client-side PDF generation for reports, invoices, and documentation.
15K+ Views
