Customize Page Number in NReco.PdfGenerator

Currently in footer already write page number which are first page : Page 1, second page : Page 2 and so on.

I am trying to achieve is first page : Page 1 and second page: Page 3.

How can I customize those number?

public void GenerateHtmlToPdf()
 {
   var htmlContent = String.Format("<body>Hello world: {0}</body>",DateTime.Now);
   var htmlToPdf = new NReco.PdfGenerator.HtmlToPdfConverter();
   htmlToPdf.PageFooterHtml = "<table style=/"border-bottom: 1px solid black; width: 100%/"><tr><td class=/"section/"></td><td style=/"text-align:right/">Page <span class=/"page/"></span></td></tr></table>";
   var pdfBytes = htmlToPdf.GeneratePdf(htmlContent);
...
}

Solution

There are 2 ways how you can achieve the desired result:

Approach #1

If you can split your content on 2 different HTML inputs (one for the 1st page which should have page number #1, and another one that should start from page number #3) then you can use GeneratePdfFromFiles method and specify for 2nd file that it should start from page number = 3 (with wkhtmltopdf option "--page-offset"):

var htmlToPdf = new NReco.PdfGenerator.HtmlToPdfConverter();
htmlToPdf.GeneratePdfFromFiles(
  new WkHtmlInput[] {
    new WkHtmlInput("first.html") {  
        PageFooterHtml = "<table style=/"border-bottom: 1px solid black; width: 100%/"><tr><td class=/"section/"></td><td style=/"text-align:right/">Page <span class=/"page/"></span></td></tr></table>" },
    new WkHtmlInput("main.html"){
        CustomWkHtmlPageArgs = " --page-offset 2 ",    // page numbers will be: 3, 4, 5 etc
        PageFooterHtml = "<table style=/"border-bottom: 1px solid black; width: 100%/"><tr><td class=/"section/"></td><td style=/"text-align:right/">Page <span class=/"page/"></span></td></tr></table>" },
    }
    null, // optional cover page html
    "output.pdf"
);

Approach #2

You may override default JS code (that inserts a page number into <span class="page"></span> placeholder) in the footer's template. To get an understanding how this JS code works take a look at the wkhtmltopdf help ("Footers And Headers" section): https://wkhtmltopdf.org/usage/wkhtmltopdf.txt

Here an example of such override:

   htmlToPdf.PageFooterHtml = @"
            <script>
window.subst = function() {
    var pageOffset = 20;  // first page will become 21
    var vars={};
    var x=document.location.search.substring(1).split('&');
    for(var i in x) {var z=x[i].split('=',2);vars[z[0]] = unescape(z[1]);}
    var x=['frompage','topage','page','webpage','section','subsection','subsubsection'];
    for(var i in x) {
        var y = document.getElementsByClassName(x[i]);
        var val = vars[x[i]];
        if (x[i]=='page' && parseInt(val)>1)
            val = parseInt(val)+1;  // page numbers will be: 1, 3, 4, 5 etc
        for(var j=0; j<y.length; ++j) y[j].textContent = val;
    }
}
</script>  
   
   
 <table style=""border-bottom: 1px solid black; width: 100%""><tr><td class=""section""></td><td style=""text-align:right"">Page <span class=""page""></span></td></tr></table>
";