Any way to add page numbering to Headers and Footers in Chrome-Pdf?

  • I've tried using {#pageNum} and javascript (which worked in wkhtmltopdf I believe)

  • Solved: Page <span class="pageNumber"></span> of <span class="totalPages"></span>

  • Where do you put those? Is this a custom header/footer? Where did you find this info?

    I'm trying to make a custom one with date in the footer as well as page count but didn't find something like this!


  • @evildmguy You need to use pdf-utils for more dynamic headers. The native one supports only page numbers.

  • administrators

    i have updated the chrome-pdf docs to describe these special css classes, you can see it here now

  • Thanks for the updates!

    Is this new update for the image urls out?

  • administrators

    Is this new update for the image urls out?


  • Where does this go?
    Page <span class="pageNumber"></span> of <span class="totalPages"></span>

  • @bjrmatos
    I do add page number by pdf utils on playground( but
    I am not sure how to use "Pdf utils" in my .net core solution(not , could you please guide me?

    I use this config, did I missing something... = new LocalReporting()
    	.RunInDirectory(Path.Combine(Directory.GetCurrentDirectory(), "ReportTemplate"))
    	.Configure(cfg => cfg.AllowedLocalFilesAccess().FileSystemStore().BaseUrlAsWorkingDirectory())

    I do checked jsreport-dotnet-example-consoleapp but didn't find something like header/footer, pagenumber...

    one more question, is it config.json a necessary file for .net core project? almost appear in all level of folder. if yes, can I export it from the playground? how can I prepare the config.json file and when will I need to update it?

    this is using "Phantom pdf"
    Page <span class="pageNumber"></span> of <span class="totalPages"></span>

  • @KeithPoonNS You can find the example for using pdf utils from .net client here

  • Thanks for your reply, the problem solved, I had read

    I am exploring and testing several report engines for .net Core5, I think JasperReports is awesome, it provides so many features from basic to advance that I need.

    I put the routine here for who may interest, the source was uploaded to


                _renderRequest.Template.PdfOperations = new List<PdfOperation>()
                    new PdfOperation()
                        Type = PdfOperationType.Merge,
                        Template = new Template
                            Content = _headerFileContent,
                            Helpers = _scriptFileContent,
                            Engine = Engine.Handlebars,
                            Recipe = Recipe.ChromePdf


    <!--header template content-->
            * {
                box-sizing: border-box;
            html, body {
                margin-top: 0cm;
                margin-right: 0cm;
                margin-bottom: 0cm;
                margin-left: 0cm;
                padding: 0px;
            .header {
                width: 100%;
                padding-top: 20px;
            .footer {
                width: 100%;
                padding-bottom: 20px;
        {{#each $pdf.pages}}
        {{#if 10}}
        <div style="page-break-before: always;"></div>
        <main class="main">
            <header class="header">
                Header from header.html
            <footer class="footer">
                <span>Page {{getPageNumber 10}} of {{getTotalPages ../$pdf.pages}}</span>
                <span>Page {{getPageNumber 10}} of {{getTotalPages @root.$pdf.pages}}</span>

  • Hi @jan_blaha

    After I changed the table html in below form (thead, tbody, tfoot)

    I found the tfoot is repeating in each page, because I want to repeat and control the element in header-footer.html, could I disable that tfoot repeaing behavior? or I should always use thead, tfoot in header-footer.html, but I tested the thead will not repeat.

    I checked pdf-utils docs but not see any talking about tfoot, please give some advise. thanks.

            <table cellpadding="0" cellspacing="0">
                    <tr class="heading">
                    {{#each GeneralView}}
                    <tr class="item">
                            $ {{price}}
                    <tr class="total">
                            Total: ${{total GeneralView}}
                    <tr class="total">
                        <td>this is tfoot are will be repeated in each page</td>

  • Try style

    thead {display: table-row-group;}

  • This post is deleted!

  • This post is deleted!

  • 0_1687239157103_upload-ee975ee9-2081-4414-ba37-f7fa0541e648

    I am getting an issue you can see here in line 57 that i am getting formAnswerDetail i am consoling it, but when i pass form Answerdetail as a prop in line 61 and in that component i am consoling it it dives me undeifine, as you can see in image that i am passing formAnswerdetail simple e.g formAnswerDetail=formAnswerDetail, I am also sending it like formAnswerDetail=../../../formAnswerDetail but give same issue, also i tried other scenarios like if i send just simple prop like data="123" then also i am not getting data in that component, I think we can't pass the props when in component when it is in #each, so can you please guide me that how can i access the data in each

  • This post is deleted!

Log in to reply

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.