JsReport Recipe ChromePdf page number

I have been creating a PDF in asp.net Core with JsReport plugin. Everything is working well except I can't print the page number and total page number in my pdf file.

I was following the steps in this doc https://jsreport.net/learn/dotnet-aspnetcore to setup controller in my asp.net Core project.

I have seen some similar questions and answers posted in stackoverflow and tested them but it does not solve my problem.
Question 1: JsReport Page Number with Chrome-pdf recipe
Question 2: Page number in jsreport

Page&nbsp;<span class="pageNumber"></span>&nbsp;of&nbsp;<span class="totalPages"></span>

I have also tried this in my Razor view but I can't see any number in my pdf.
Please help, thanks in advance!

Solution

You can find the example here

The main requirements are described in the documentation.

Remember that in order to show the header/footer you need to activate the displayHeaderFooter option first and add some top, bottom margin to the template in order to give the page some space to show the header/footer.

This translated into the asp.net core integration

[MiddlewareFilter(typeof(JsReportPipeline))]
public async Task<IActionResult> InvoiceWithHeader()
{
    var header = await JsReportMVCService.RenderViewToStringAsync(HttpContext, RouteData, "Header", new { });
    HttpContext.JsReportFeature()
        .Recipe(Recipe.ChromePdf)
        .Configure((r) => r.Template.Chrome = new Chrome {
            HeaderTemplate = header,
            DisplayHeaderFooter = true,
            MarginTop = "1cm",
            MarginLeft = "1cm",
            MarginBottom = "1cm",
            MarginRight = "1cm"
        });
    return View("Invoice", InvoiceModel.Example());
}