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 Show Page Number html pdf Converting for Multiple Pages?
Creating PDFs through coding is an important feature of a web application. This is required for the creation of reports in a data-centric application. The PDF may contain any type of data, such as tables, charts, image graphics, and so on. A single-page PDF can be easily generated from HTML. However, converting a lengthy UI template into a multi-page PDF is a slightly time-consuming process. There are online converter tools available to create PDF files from Word and HTML documents. There are also numerous integrative libraries available for generating PDF from HTML code.
Because our data is usually dynamic, the best way to handle it and convert it is to use JavaScript, which gives us the ability to deal with it dynamically. In this tutorial, we will use jsPDF to convert HTML to pdf and page numbers at the bottom right corner of the footer.
Introduction to jsPDF
PDFs are ubiquitous on the internet, with almost every enterprise relying on them to share documents. jsPDF was created to address a major issue with how pdf files were generated. The creators decided to make it open-source so that a community of developers could build on it.
JsPDF is a JavaScript plugin that generates pdf files with tables, either by parsing HTML tables or by supplying the data directly from JavaScript. When we use this plugin on our website, it will automatically download the generated pdf to our local machine. It is a JavaScript-based open-source library for creating PDF documents. It offers several options for creating PDF files with custom properties. It has a plethora of plugins to support various methods of PDF generation.
Here are three methods for installing this plugin.
Making use of NPN
npm install jspdf jspdf-autotable
Making use of CDN
<script src= "jspdf.min.js"></script> <script src= "jspdf.plugin.autotable.min.js"></script>
Downloading jsPDF and jsPDF-autotable directly from github.
Adding Page Numbers in a PDF Document Footer
This is the fundamental HTML code that will be used in our example. To use this plugin in JavaScript, we will use CDN.
<!DOCTYPE html>
<html>
<head>
<title> Adding page numbers in the footer of a PDF using JSPDF </title>
<meta charset= "UTF-8">
<meta name= "viewport" content= "width=device-width, initial-scale= 1.0">
</head>
<body>
</body>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
</html>
Example
The first step is to create an object and initialize it. It is created by calling new jdPDF() and passing orientation, unit, and format as parameters to the function. In this case, we specify 'p' (portrait) as the orientation, 'mm' as the unit, and 'a4' as the format.
Next, we add some text to the top of the page, such as 'xyz page.' To display text, we use the obj object and the text() method. It requires 5 arguments in total, three of which are required. The string or array of strings is the first argument. The second and third coordinate positions are used to determine where the text should be placed.
In order to have multiple pages in our pdf we use the addPage() method that accepts two optional arguments: format and orientation. The format of the new page, for example, a4, b1, letter, ledger, and so on. The format is a4 by default. Orientation refers to the new page's orientation, which can be either portrait or landscape. We can also use the shortcut letters 'p' or 'l'.
The next step is to get the count of the total number of pages write a loop using it to add pages numbers in the footer of every page in the PDF.
Finally, we invoke the save() method, providing some name for the pdf. When this method is encountered, the pdf is automatically downloaded to the local machine.
<!DOCTYPE html>
<html>
<head>
<title> Adding page numbers in the footer of a PDF using JSPDF </title>
<meta charset= "UTF-8">
<meta name= "viewport" content= "width=device-width, initial-scale= 1.0">
</head>
<body>
</body>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script>
var doc = new jsPDF('p','mm','a4');
doc.text("First page", 10, 10);
doc.addPage();
doc.text("Second page", 10, 10);
doc.addPage();
doc.text("Third page", 10, 10);
doc.addPage();
doc.text("Fourth page", 10, 10);
doc.addPage();
doc.text("Fifth page", 10, 10);
doc.addPage();
doc.text("Last page", 10, 10);
const pageCount = doc.internal.getNumberOfPages();
for(var i = 1; i <= pageCount; i++) {
doc.setPage(i);
doc.text('Page ' + String(i) + ' of ' + String(pageCount), 210-20,297-30, null, null, "right");
}
doc.save('output.pdf');
</script>
</html>
352 Views
