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?

score 41 · Accepted Answer · answered Dec 19 '14 at 13:59

41

You could also try a slightly more succinct approach:

@page {
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
  }
}

You need to put this in your css/style, and you do not need to add an extra footer HTML element.

answered Dec 19 '14 at 13:59

John Mark

2,458
2
21
17

I was having a problem using this solution. I was on flying saucer version 9.1.4. Updating to 9.1.5 resolved my issue. – grizzasd Apr 12 '21 at 16:01
Worked perfectly in a Spring Boot webapp, thanks! For new readers: this is all you need, don't have to add any divs and such. – Peter Illes Oct 26 '21 at 22:16

score 40 · Answer 2 · answered Jul 30 '13 at 17:44

40

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.

answered Jul 30 '13 at 17:44

Daniel Kaplan

62,768
50
234
356

3

This solution did not work for me. It only appeared on the last page. – Paulo Oliveira Mar 10 '17 at 15:57
Where I can find the definition/reference for function `running()` and `element()`. Couldn't find it. One of the pages I looked into: https://www.w3schools.com/cssref/css_functions.asp – Paulo Oliveira Mar 10 '17 at 16:02
@PauloOliveira Have you solved that shows only on last page issue? I am encountering that as well. – Gideon May 12 '17 at 10:36
1

@gideon I have used the second answer, from [@john-mark](https://stackoverflow.com/users/609601/john-mark). This comment was about that functions... Because I could find their description on a official page or document. – Paulo Oliveira May 12 '17 at 13:40
i have upvoted but after applying this changes pdf stop generating. – Amit Dec 13 '17 at 07:06
2

@PauloOliveira It shows only on the last page when the
is too far down in the . Place it somewhere higher so that it will print before the first page ends. But John Mark's answer is better.
– Edward Feb 03 '20 at 12:16

score 3 · Answer 3 · answered Sep 11 '15 at 13:33

3

@John Mark 's solution worked for me. In my application I needed to embed the style info in the HTML, so I wrapped this in <style> tags and put it inside the <head> before <title>. Maybe that info will be useful to someone else.

answered Sep 11 '15 at 13:33

Matt Morgan

4,900
4
21
30

score 2 · Answer 4 · answered Nov 29 '18 at 15:15

Important Error & Solution!

For Starters, using John Mark's solution below is the CORRECT way to get it working:

@page {
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
  }
}

However many people may have encountered the following issue where your PDF HAS STOPPED GENERATING!

This is solved by updating your VERSION of FLYING SAUCER.

I was running 9.1.4 when my PDF stopped generating due to the @page & @bottom-right css code.

This was a glitch in Flying Saucer that was fixed in version 9.1.5!

Make sure to update to 9.1.5 and use John Mark's answer.

mattanja · Answer 5 · 2021-10-20T19:09:42.087

The most upvoted answer did not work for me, the footer only showed on the last page. (This behavior is also mentioned in the comments below the answer provided by Daniel Kaplan.)

The solution to this problem was provided by the following comment:

@PauloOliveira It shows only on the last page when the is too far down in the . Place it somewhere higher so that it will print before the first page ends. But John Mark's answer is better. – Edward Feb 3 '20 at 12:16

So what has worked for me (using FlyingSaucer rendering with OpenPDF) is the following - placing the definition of the footer element somewhere above the main content and applying the solution provided by Daniel Kaplan:

<body>
  <div id="header">Some header content</div>
  <div id="footer">
    page <span id="pagenumber"></span> of <span id="pagecount"></span>
  </div>
  <div th:each="item: ${listOfItems}">
    [The long content listing things over multiple pages...]
  </div>
</body>

And the CSS code:

@page {
    size: A4 portrait;
    margin-top: 2cm;
    margin-left: 2cm;
    margin-right: 2cm;
    margin-bottom: 3cm;

    @bottom-left {
        content: element(footer); /* footer element must be specified before end of first page! */
        vertical-align: top;
    }
}


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

#pagenumber::after {
    counter-increment: page;
    counter-reset: page 1;

    content: counter(page);
}

score 1 · Answer 6 · answered Jul 22 '22 at 08:16

By combining Daniel Kaplan's and Edward's answer I am just combining them and shwoing the full solution in plain html (which would have helped me in the first place):

<!DOCTYPE HTML>
<html>
    <head>
  
        <style type="text/css" media="print">

            @page {

                size: A4;
                margin: 2.3cm;

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

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

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

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

        </style>

    </head>
    <body>

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

        <div>
          content of first page
        </div>

        <div style="page-break-before: always">
          content of next page
        </div>
      
    </body>
</html>

Running this maven-version:

<dependency>
  <groupId>org.xhtmlrenderer</groupId>
  <artifactId>flying-saucer-pdf</artifactId>
  <version>9.1.22</version>
</dependency>

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

6 Answers6

Linked