i have this headerfooter.html code which supposed to shows footer with page numbers:
<html>
<head>
<meta charset="utf-8">
<style>
* {
box-sizing: border-box;
}
html {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
direction: rtl;
margin: 15px 10px 10px 15px;
}
.main {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
border: 2px solid black; /* Add a border to each page */
border-radius: 10px;
}
.header {
width: 100%;
padding-top: 15px;
}
.footer {
width: 100%;
padding-bottom: 15px;
}
</style>
</head>
<body>
{{#each $pdf.pages}}
{{#if @index}}
<div style="page-break-before: always;"></div>
{{/if}}
<main class="main">
<header class="header">
</header>
<footer class="footer">
<span>Page {{getPageNumber @index}} of {{getTotalPages ../$pdf.pages}}</span>
</footer>
</main>
{{/each}}
</body>
</html>
and I use this code to render the report from the headerfooter and another HTML file containing the report data:
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,
Type=PdfOperationType.Merge,
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 helper.cs code:
function getPageNumber(pageIndex) {
if (pageIndex == null) {
return ''
}
const pageNumber = pageIndex + 1
return pageNumber
}
function getTotalPages(pages) {
if (!pages) {
return '';
}
return pages.length;
}
and the report content is like this:I put divs inside content and the content is shown and the headerfooter is also shown the only problem I am facing is page number is not shown correctly.
<div style='page-break-before: always;'></div>
<div class="container">
<content/>
</div>
the page footer shows page 1 of 4 in all pages, the page index is not change with each page
the solution is to set:
and the numbers are shown correctly.