To add page numbers, you can use a JavaScript snippet in your template that targets specific classes. The classes page and topage will be automatically filled by the script.
Option 1: JavaScript approach
Include this in your header/footer template:
<script>
function number_pages() {
var vars={};
var x=document.location.search.substring(1).split('&');
for(var i in x){var z=x[i].split('=',2);vars[z[0]] = decodeURIComponent(z[1]);}
var x=['frompage','topage','page','webpage','section','subsection','subsubsection'];
for(var i in x){
var y = document.getElementsByClassName(x[i]);
for(var j=0; j<y.length; ++j) y[j].textContent = vars[x[i]];
}
}
</script>
<body onload="number_pages()">
Page <span class="page"></span> of <span class="topage"></span>
</body>
Option 2: wkhtmltopdf built-in approach
Use the special [page] and [topage] tokens in your header/footer configuration:
render pdf: 'filename', header: { right: '[page] of [topage]' }