47
Views
7
Comments
Solved
[HTML2PDF] How to add Page Number
html2pdf
Service icon
Forge asset by Miguel Antunes
Application Type
Service

I am developing an application that will export multiple pages of PDF.

I need help how can I implement/add a page number for my generated PDF? 

2022-07-12 09-55-09
Philip Paolo De Castro
Solution

Hi Duarte Moreira,

Yes I have solved my issue, I used the GeneratePDF_Advance and on the Properties I added these items (Yello box)

On the Footer option add this " [page] of [topage] " depending which location you want

then also add the font size 

you will have something like this 


2024-12-10 04-40-04
Gitansh Anand

Hi @Philip Paolo De Castro, Please look at this stack overflow answer and this documentation on Page Numbers.

Thanks
Gitansh Anand

2021-11-12 04-59-31
Manikandan Sambasivam

Use the HTML2PDF component in your OutSystems application to generate the PDF from your HTML template. Ensure that the JavaScript code for page numbering is included in the HTML template that you pass to the HTML2PDF component.

Java script code

var totalPages = 0;

// Event handler for when HTML2PDF has finished rendering each page

document.addEventListener('HTML2PDF:HTML2PDFLoaded', function(event) {

    totalPages++;

    document.getElementById('pageNumber').innerText = totalPages;

});


2022-07-12 09-55-09
Philip Paolo De Castro

Hi Manikandan Sambasivam, I tried adding this to my HTML file but it doesn't seems to show the page total page number, you can check my OML attached here and the sample HTML file I used.

I added the js code to the later part of the HTML body.

SampleApplication.oml
sample.html
2023-12-27 12-02-31
Duarte Moreira

Hi Phillip,


 Did you find a solution for that problem? 

2022-07-12 09-55-09
Philip Paolo De Castro
Solution

Hi Duarte Moreira,

Yes I have solved my issue, I used the GeneratePDF_Advance and on the Properties I added these items (Yello box)

On the Footer option add this " [page] of [topage] " depending which location you want

then also add the font size 

you will have something like this 


2023-12-27 12-02-31
Duarte Moreira

Thank you for your reply.

I had the text in the footer correctly, but if I didn’t add margins, the text wouldn’t show on the page.


Thanks for you help.


2022-12-30 07-28-09
Navneet Garg

You need to check wkhtmltopdf documentation to add page numbers in pdf. As the extension is only a wrapper to the wkhtmltopdf they not implemented all the methods.

https://medium.com/@liuchia/how-to-add-page-number-header-footer-with-wkhtmltopdf-in-dotnet-e0f2531118c0


I used jsreport to overcome lots of challenges because jsreport provide more flexibility and easy customization with api support as well.

https://jsreport.net/learn/api

I also created a plugin for jsreport.

https://www.outsystems.com/forge/component-overview/16524/jsreport-demo-o11

https://jsreport.net/blog/wkhtmltopdf-report-with-page-numbers




Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.