pdf_footer.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{{ title }}</title>
        <style>{{ css|safe }}</style>
        <script>
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

var pdf_info = {};  /* global; must use var, not let */

// In general: wkhtmltopdf 0.12.5 seems to fail with "let".

function setupPdfInfo() {
    const kvp_list = document.location.search.substring(1).split('&');
        // list of strings
        // ... location.search.substring(1) is the part of the URL after the ?
        // ... e.g. "prop1=val1,prop2=val2"
    var key_value_pair;
    var i;
    for (i = 0; i < kvp_list.length; ++i) {
        key_value_pair = kvp_list[i].split('=', 2);
        pdf_info[key_value_pair[0]] = decodeURI(key_value_pair[1]);
    }
}

function setPageNumbers() {
    // For possibilities, see: wkhtmltopdf --extended-help
    // "section" corresponds to <h1>; "subsection" to <h2>.
    document.getElementById('page_number').textContent = pdf_info.page || "?";
    document.getElementById('page_count').textContent = pdf_info.topage || "?";
    document.getElementById('section').textContent = pdf_info.subsection || "";
}

function onload() {
    setupPdfInfo();
    setPageNumbers();
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        </script>
    </head>
    <body onload="onload()">
        <div class="pdf_footer left">
            <span id="section"></span>
        </div>
        <div class="pdf_footer right">
            Page <span id="page_number"></span> of <span id="page_count"></span>
        </div>
    </body>
</html>