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

javascript css wkhtmltopdf css-paged-media

95,943

Solution 1

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

Solution 2

Actually it's much simpler than with the code snippet. You can add the following argument on the command line: --footer-center [page]/[topage].

Like richard mentioned, further variables are in the Footers and Headers section of the documentation.

Solution 3

Among a few other parameters, the page number and total page number are passed to the footer HTML as query params, as outlined in the official docs:

... the [page number] arguments are sent to the header/footer html documents in GET fashion.

Source: http://wkhtmltopdf.org/usage/wkhtmltopdf.txt

So the solution is to retrieve these parameters using a bit of JS and rendering them into the HTML template. Here is a complete working example of a footer HTML:

<!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>

substitutePdfVariables() is called in body onload. We then get each supported variable from the query string and replace the content in all elements with a matching class name.

Solution 4

From the wkhtmltopdf documentation (http://madalgo.au.dk/~jakobt/wkhtmltoxdoc/wkhtmltopdf-0.9.9-doc.html) under the heading "Footers and Headers" there is a code snippet to achieve page numbering:

<html><head><script>
function subst() {
  var vars={};
  var x=document.location.search.substring(1).split('&');
  for(var i in x) {var z=x[i].split('=',2);vars[z[0]] = unescape(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></head><body style="border:0; margin: 0;" onload="subst()">
<table style="border-bottom: 1px solid black; width: 100%">
  <tr>
    <td class="section"></td>
    <td style="text-align:right">
      Page <span class="page"></span> of <span class="topage"></span>
    </td>
  </tr>
</table>
</body></html>

There are also more available variables which can be substituted other than page numbers for use in Headers/Footers.

Solution 5

Safe approach, even if you are using XHTML (for example, with thymeleaf). The only difference with other's solution is the use of // tags.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <script>
        /*<![CDATA[*/
        function subst() {
            var vars = {};
            var query_strings_from_url = document.location.search.substring(1).split('&');
            for (var query_string in query_strings_from_url) {
                if (query_strings_from_url.hasOwnProperty(query_string)) {
                    var temp_var = query_strings_from_url[query_string].split('=', 2);
                    vars[temp_var[0]] = decodeURI(temp_var[1]);
                }
            }
            var css_selector_classes = ['page', 'topage'];
            for (var css_class in css_selector_classes) {
                if (css_selector_classes.hasOwnProperty(css_class)) {
                    var element = document.getElementsByClassName(css_selector_classes[css_class]);
                    for (var j = 0; j < element.length; ++j) {
                        element[j].textContent = vars[css_selector_classes[css_class]];
                    }
                }
            }
        }
        /*]]>*/
    </script>
</head>
<body onload="subst()">
    <div class="page-counter">Page <span class="page"></span> of <span class="topage"></span></div>
</body>

Last note: if using thymeleaf, replace <script> with <script th:inline="javascript">.

View more solutions

95,943

Author by

Tamás Barta

Updated on February 26, 2021

Comments

Tamás Barta over 3 years

I'm developing an electronic invoicing system, and one of our features is generating PDFs of the invoices, and mailing them. We have multiple templates for invoices, and will create more later, so we decided to use HTML templates, generate HTML document, and then convert it to PDF. But we're facing a problem with wkhtmltopdf, that as far as I know (I've been Googleing for days to find the solution) we cannot simply both use HTML as header/footer, and show page numbers in them.

In a bug report (or such) ( http://code.google.com/p/wkhtmltopdf/issues/detail?id=140 ) I read that with JavaScript it is achievable this combo. But no other information on how to do it can be found on this page, or elsewhere.

It is, of course not so important to force using JavaScript, if with wkhtmltopdf some CSS magic could work, it would be just as awesome, as any other hackish solutions.

Thanks!
Dan Mazzini almost 13 years

PDFKit is just a Ruby wrapper for wkhtmltopdf
thirtydot almost 13 years

Oops. Apologies for not actually checking your link.
Tamás Barta almost 13 years

Thank you for replying! I've created two spans with the given IDs, but somehow the JavaScript does not run, since nothing changes. But that's another issue, you solved my problem to find out how wkhtmltopdf passes page numbers to headers! :)
Tamás Barta almost 13 years

Ohh, I just mistyped something as usual... Works perfectly! Thanks again!
Tamás Barta over 11 years

That's right, but this way you can't use HTML, as I remember back working on this project.
marienke over 10 years

BROKEN LINK: madalgo.au.dk/~jakobt/wkhtmltoxdoc/wkhtmltopdf-0.9.9-doc.htm‌l
marienke over 10 years

BROKEN LINK: madalgo.au.dk/~jakobt/wkhtmltoxdoc/wkhtmltopdf-0.9.9-doc.htm‌l
marienke over 10 years

BROKEN LINK: madalgo.au.dk/~jakobt/wkhtmltoxdoc/wkhtmltopdf-0.9.9-doc.htm‌l
Tamás Barta over 10 years

I also looked at CSS paged media, but the headers and footers are rendered individually per page, so they cannot have any of these information. The dilemma was: how to solve the problem of having to create and position headers and footers on every page with CSS. I couldn't find an answer, so wkhtmltopdf's header and footer mechanism looked an easier way.
Sushant about 10 years

hi all, i tried this answer, but in my case i am adding it in header space, but it displays only once. In my case, pdf generated is having 6 pages from html. please help
Yourpalal about 9 years

@Sushant, you need to use the --header-html parameter when calling wkhtmltopdf to supply a url that will be added to the start of each page. There is a slightly more complete example on wkhtmltopdf.org/usage/wkhtmltopdf.txt .
aknuds1 over 7 years

This is hardly an answer is it, if wkhtmltopdf doesn't support it?
joshuahhh about 7 years

By itself, that snippet does nothing. The page you linked to includes the Javascript code which actually populates the spans in the snippet.
Dhara about 7 years

hey It doesn't work for me.. I do same thing but it shows undefined in those values
Oleg Abrazhaev about 7 years

it pushes background to the bottom. I have a bottom line in my page background and I need show paging over this line. but in order to show pages this way I need to add margin-bottom 5 parameter and it increases my pdf page height and pushes bottom line to the next page.
Oleg Abrazhaev about 7 years

have fixed it with 'footer-spacing' => -4, 'footer-font-size' => 10,
FrenkyB almost 7 years

Which framework are you using? In .NET I don't know how to use this from C# generated code. (it needs browser to trigger)
Juangui Jordán over 6 years

If using XHTML, wrap the script in //<![CDATA[' //]]> tags. I'm using thymeleaf in a spring application and it wouldn't accept the javascript without these tags.
Shakeel Ahmed about 6 years

I think we are talking about wkhtmltopdf... Why PDFKit mentioned here. If someone is not using Ruby then these codes are useless.
Ishmaeel over 4 years

@Dhara: It will only work in the header or the footer. It will not work in the body.
Divyang over 3 years

Superb. Works like a charm for me!
David Louda over 3 years

just a little example where the argument comes, it took me several minutes to figure out its not in the end .\'Program Files (x86)'/wkhtmltopdf/bin/wkhtmltopdf.exe --footer-center [page]/[topage] C:\faktury\f-2.html C:\-faktury\f-wk2.pdf
Joshua Pinter over 3 years

ProTip: If you are not using certain information like the topage, webpage, section, subsection and subsubsection then you should remove it. We are generating fairly large PDFs (7,000+ pages) and were running into a segmentation fault at ~1,000 pages. After a thorough investigation, it came down to removing those unused variables. We haven't seen the segmentation fault since.
A Petrov over 2 years

@JoshuaPinter how do you remove those variables? (Using C# if it matters)
Joshua Pinter over 2 years

@APetrov Literally just remove them from var x=['frompage','topage','page','webpage','section','subsectio‌n','subsubsection']; and they won't be processed in the for loop that follows it.