page numbering in C# desktop app jsreport

  • in my code i have headerfooter.html
    like this:

        {{#each $pdf.pages}}
        {{#if 0}}
        <div style="page-break-before: always;"></div>
        <main class="main">
            <header class="header">
            <footer class="footer">
                <span>Page {{getPageNumber 0}} of {{getTotalPages ../$pdf.pages}}</span>

    but the report is showing page 1 of 4 in all pages ??
    this is the code I use to render the report:

    var report = await rs.RenderAsync(new RenderRequest
        Template = new Template
            Content = File.ReadAllText(Path.Combine(path.LocalPath, "ReportTemplates", _report.ReportTemplate)),
            Engine = Engine.Handlebars, // You can specify the template engine if needed
            Recipe = Recipe.ChromePdf,
            Chrome = new Chrome()
                MarginBottom = "2cm",
                MarginTop = "1cm",
                MarginLeft = "1cm",
                MarginRight = "1cm"
            PdfOperations = new List<PdfOperation>() {                       
            new PdfOperation{ 
            MergeWholeDocument = false,                       
            Template=new Template{
                Helpers=File.ReadAllText(Path.Combine(path.LocalPath, "ReportTemplates", "helper.js")),
             Content = File.ReadAllText(Path.Combine(path.LocalPath, "ReportTemplates", "Header-Footer.html")),
        Engine = Engine.Handlebars,
         Recipe = Recipe.ChromePdf,
        Data = _report.Content,

    and this is the content HTML code:

    <div style='page-break-before: always;'></div>
    <div class="container">
        <table class="centered-table ">
            <tr class="extr-spacing-er">
                <td style="text-align: center; vertical-align: top;" width="33%">
                    <img src="{{asset "./kingdom_ fo saudi_arabia.png""dataURI"}}" width="210" height="53" /><br>
                    <strong>وزارة التعليم</strong><br>
                <td style="text-align: center; vertical-align: top;" width="33%">
                    <img src="{{asset "./minstry_of_education.png""dataURI"}}" width="100" height="100" />
                <td style="text-align: left; vertical-align: top;" width="33%">
                    التاريخ: <span id="currentDate"></span>
                        // JavaScript to display the current system date
                        var currentDateElement = document.getElementById("currentDate");
                        var currentDate = new Date();
                        currentDateElement.textContent = currentDate.toLocaleDateString();

    helper js i tried different codes but the same output page index is not changed for every page.

  • The MergeWholeDocument should be true in this case.

  • thank you, you are right.

Log in to reply

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