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 Show Page Number html pdf Converting for Multiple Pages?
Creating PDFs from HTML is an essential feature for web applications, especially for generating reports in data-driven applications. The PDF may contain tables, charts, images, and other content. While single-page PDFs are straightforward to generate, converting lengthy UI templates into multi-page PDFs requires careful handling of page breaks and page numbering.
In this tutorial, we will use jsPDF to convert HTML to PDF and add page numbers at the bottom right corner of each page's footer.
Introduction to jsPDF
jsPDF is an open-source JavaScript library for generating PDF documents directly in the browser. It provides extensive functionality for creating PDFs with custom properties, text, images, and tables without requiring server-side processing.
Key features of jsPDF include
Client-side PDF generation No server dependency required
Multiple page support Automatic and manual page breaks
Text formatting Fonts, sizes, colors, and positioning
Plugin ecosystem Extensions like autotable for enhanced functionality
Installation Methods
There are three primary ways to include jsPDF in your project
Using NPM
npm install jspdf jspdf-autotable
Using CDN
<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/jspdf-autotable/3.5.31/jspdf.plugin.autotable.min.js"></script>
Direct Download
Download jsPDF and jsPDF-autotable files directly from their GitHub repositories and include them locally in your project.
Basic jsPDF Syntax
Following is the syntax for creating a jsPDF document
var doc = new jsPDF(orientation, unit, format);
Where
orientation 'portrait' (or 'p') or 'landscape' (or 'l')
unit 'mm', 'cm', 'in', or 'pt'
format 'a4', 'a3', 'letter', etc.
Adding Page Numbers in PDF Footer
To add page numbers in a multi-page PDF, we need to create multiple pages, count the total pages, and then loop through each page to add the page number in the footer.
Step-by-Step Process
Create jsPDF instance Initialize the PDF document with desired orientation, unit, and format
Add content to pages Use
text()method to add content andaddPage()to create new pagesGet page count Use
doc.internal.getNumberOfPages()to get total pagesAdd page numbers Loop through all pages and add page numbers in the footer
Save the PDF Use
save()method to download the generated PDF
Example Basic Page Numbering
Following example creates a multi-page PDF with page numbers in the footer
<!DOCTYPE html>
<html>
<head>
<title>Adding Page Numbers in PDF Footer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>jsPDF Page Numbering Demo</h1>
<button onclick="generatePDF()" style="padding: 10px 20px; font-size: 16px;">Generate PDF with Page Numbers</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
function generatePDF() {
var doc = new jsPDF('p', 'mm', 'a4');
// Add content to multiple pages
doc.text("First page content", 20, 30);
doc.addPage();
doc.text("Second page content", 20, 30);
doc.addPage();
doc.text("Third page content", 20, 30);
doc.addPage();
doc.text("Fourth page content", 20, 30);
doc.addPage();
doc.text("Fifth page content", 20, 30);
// Get total number of pages
const pageCount = doc.internal.getNumberOfPages();
// Add page numbers to each page
for(var i = 1; i <= pageCount; i++) {
doc.setPage(i);
doc.text('Page ' + String(i) + ' of ' + String(pageCount),
210-20, 297-10, null, null, "right");
}
// Save the PDF
doc.save('multi-page-document.pdf');
}
</script>
</body>
</html>
The output generates a PDF file with 5 pages, each containing page numbers in the format "Page X of Y" at the bottom right corner.
Example Advanced Page Numbering with Headers
Following example demonstrates more sophisticated page numbering with headers and footers
<!DOCTYPE html>
<html>
<head>
<title>Advanced PDF Page Numbering</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Advanced PDF Generation</h1>
<button onclick="generateAdvancedPDF()" style="padding: 10px 20px; font-size: 16px;">Generate Advanced PDF</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
function generateAdvancedPDF() {
var doc = new jsPDF('p', 'mm', 'a4');
// Page content
const pages = [
"Introduction<br>\nThis is the first chapter of our document.",
"Chapter 1: Getting Started<br>\nHere we begin our journey with jsPDF.",
"Chapter 2: Advanced Features<br>\nExploring more complex PDF generation techniques.",
"Conclusion<br>\nSummary of all topics covered in this document."
];
// Add content to pages
pages.forEach((content, index) => {
if (index > 0) doc.addPage();
doc.text(content, 20, 40);
});
const pageCount = doc.internal.getNumberOfPages();
const docTitle = "TutorialsPoint PDF Guide";
// Add headers and page numbers
for(let i = 1; i <= pageCount; i++) {
doc.setPage(i);
// Add header
doc.setFontSize(10);
doc.text(docTitle, 20, 15);
// Add footer with page number
doc.text('Page ' + i + ' of ' + pageCount,
doc.internal.pageSize.width - 30,
doc.internal.pageSize.height - 10,
null, null, "right");
// Add date
doc.text(new Date().toLocaleDateString(), 20,
doc.internal.pageSize.height - 10);
}
doc.save('advanced-document.pdf');
}
</script>
</body>
</html>
This example creates a PDF with headers containing the document title, footers with page numbers, and the current date on each page.
Key Methods for Page Management
| Method | Description | Usage |
|---|---|---|
addPage() |
Adds a new page to the document | doc.addPage('a4', 'portrait') |
setPage(n) |
Switches to page number n for editing | doc.setPage(2) |
getNumberOfPages() |
Returns total number of pages | doc.internal.getNumberOfPages() |
text() |
Adds text at specified coordinates | doc.text('Hello', 10, 20) |
save() |
Downloads the generated PDF | doc.save('filename.pdf') |
Page Positioning Tips
When positioning page numbers and other elements, consider these coordinate guidelines for A4 format
Page width 210mm (A4 portrait)
Page height 297mm (A4 portrait)
Footer position Y coordinate around 280-290mm from top
Right alignment X coordinate around 190mm for right-aligned text
Best Practices
Consistent positioning Use the same coordinates for headers and footers across all pages
Page counting Always get the total page count before adding page numbers
Text alignment Use the alignment parameter in
text()method for proper positioningFont management Set appropriate font sizes for headers and footers (typically 8-12pt)
Conclusion
Adding page numbers to multi-page PDFs with jsPDF involves creating pages, getting the total page count, and looping through each page to add formatted page numbers in the footer. The setPage() method allows you to switch between pages for editing, while getNumberOfPages() provides the total count needed for "Page X of Y" formatting.
1K+ Views
