asp.net-corejsreport

Page number in asp.net core footer (partial view)


I am using jsreport with my Asp.Net Core MVC project. It is working all right except for page numbers.

I am using a partial view for footer.

Here is the partial view:

<table style="font-size: 10px; padding-bottom: 5px; padding-top: 0in; padding-left: 0.25in; padding-right: 0.25in;">
    <tbody>
        <tr>
            <td style="width: 1.5in; text-align: left;"><b>@($"{DateTime.Now}")</b></td>
            <td style="width: 8.2in; text-align: center;">Brand Name</td>
            <td style="width: 1.5in; text-align: right;">Page&nbsp;<span class="pageNumber"></span>&nbsp;of&nbsp;<span class="totalPages"></span></td>
        </tr>
    </tbody>
</table>

Unfortunately, the page number part is not working at all. I just see "Page of " in the rendered PDF.

I am using the Chrome-PDF recipe and do not wish to use pdf-utils for the footer.

Even if I put the following line in the main report body view, I still do not get any page numbers.

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

Any help will be appreciated.


Solution

  • The header html needs to be passed to the Template.Chrome.HeaderTemplate property, you need to also enable header printing using Template.Chrome.DisplayHeaderFooter and also make a space for the header using margins.

    Here is how the controller action can look like

    [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());
    }
    

    And how the Header view

    <div style='text-align:center; font-size: 10px; width:100%'>Page number <span class="pageNumber"></span>&nbsp;of&nbsp;<span class="totalPages"></span></div>
    

    You can find an example repository here
    https://github.com/jsreport/jsreport-dotnet-example-webapp