How to Do Page Numbering in Header/Footer HTMLs with Wkhtmltopdf

How to do page numbering in header/footer htmls with wkhtmltopdf?

To show the page number and total pages you can use this javascript snippet in your footer or header code:

  var pdfInfo = {};
  var x = document.location.search.substring(1).split('&');
  for (var i in x) { var z = x[i].split('=',2); pdfInfo[z[0]] = unescape(z[1]); }
  function getPdfInfo() {
    var page = pdfInfo.page || 1;
    var pageCount = pdfInfo.topage || 1;
    document.getElementById('pdfkit_page_current').textContent = page;
    document.getElementById('pdfkit_page_count').textContent = pageCount;
  }

And call getPdfInfo with page onload

Of course pdfkit_page_current and pdfkit_page_count will be the two elements that show the numbers.

Snippet taken from here

Snappy & wkhtmltopdf : page numbering in footer

... the doc here indicate that some tags are replaced with, for example, the page number.

wkhtmltopdf: show content on footer, for example page number

I think this issue may be due to version 0.12.2.4 otherwise, this --footer-center [page]/[topage] command will be doing your work.

one more example i have checked that substitutePdfVariables() is called in body onload.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script>
        function substitutePdfVariables() {

            function getParameterByName(name) {
                var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
                return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
            }

            function substitute(name) {
                var value = getParameterByName(name);
                var elements = document.getElementsByClassName(name);

                for (var i = 0; elements && i < elements.length; i++) {
                    elements[i].textContent = value;
                }
            }

            ['frompage', 'topage', 'page', 'webpage', 'section', 'subsection', 'subsubsection']
                .forEach(function(param) {
                    substitute(param);
                });
        }
    </script>
</head>
<body onload="substitutePdfVariables()">
    <p>Page <span class="page"></span> of <span class="topage"></span></p>
</body>
</html>

Here Docs You can find out more variables about header and footer.

How to Do Page Numbering in Header/Footer HTMLs with Wkhtmltopdf