With Flying Saucer, how do I generate a pdf with a page number and page total on every page at the footer?

Question

It took me a little more research than I would have liked to figure this out on my own, so I'm going to post a comprehensive answer here. It seems like the information to do this is spread across many different websites and I'd like to put it in one place. This answer may be the same thing, but my eyes glaze over because it's in a Java string and not in a html template. Here's the question:

I'm rendering a PDF and I want a footer at the bottom of the page that says, "Page n of m" where "n" is the page number you're on and "m" is the total pages in the document. How do I do that?

Answer 1

In your html, you need to put this somewhere in the body tag:

<div id="footer">
    page <span id="pagenumber"></span> of <span id="pagecount"></span>
</div>

And this should be your css/style:

    #footer {
        position: running(footer);
        text-align: right;
    }

    @page {
        @bottom-right {
            content: element(footer);
        }
    }

    #pagenumber:before {
        content: counter(page);
    }

    #pagecount:before {
        content: counter(pages);
    }

---

You can learn more about that @bottom-right option here.