Generating header/footer with flying saucer (xHTMLRenderer) and iText

Asked 24/11, 2011 at 23:24 Answered 23/10, 2015 at 17:52

I realize this question has been asked before (I looked at all the solutions and tried them all) but I am still trying to generate a pdf document with a header and footer that repeat on every page.

I am using flying saucer R8 with iText2.0.8 I have tried many different methods to get it working but so far to no avail. Some methods I tested out were https://gist.github.com/626264, using running elements and margin boxs http://pigeonholdings.com/projects/flyingsaucer/R8/doc/guide/users-guide-R8.html#xil_40 (css3 feature), a guide for flying saucer r7 that doesn't work for r8 http://today.java.net/pub/a/today/2007/06/26/generating-pdfs-with-flying-saucer-and-itext.html#page-specific-features, a long with many other methods which did not work for me.

My header div contains 2 other divs with images and my footer is just for page numbering. The html is being put into a StringBuffer called buf.

buf.append("<head>");
    buf.append("<title>blabla</title> ");
    buf.append("<style type='text/css' media='print'>  ");
    buf.append("@page { size:8.5in 11in; padding:1em; @bottom-left { content: element(footer); } } ");
    buf.append("#footer { font-size: 90%; font-style: italic;  position: running(footer); top: 0; left: 0; }");
    buf.append("#pagenumber:before { content: counter(page); } ");
    buf.append("#pagecount:before { content: counter(pages); } ");
buf.append("</style></head>");
buf.append("<body>");
 buf.append("<div class='header' style='clear:both;'>");
    buf.append("<div id='moneyLogo' style='float:left'>"); 
    buf.append("<img src='logo.jpg' alt='Some alt text' />");
    buf.append("</div>");
    buf.append("<div id='canLogo' style='float:right'>");
    buf.append("<img src='someImg.gif' alt='alt text' />");
    buf.append("</div>");
    buf.append("<h3 style='text-align:center; clear:both;'>alt text</h3>");
    buf.append("<div style='text-align:center;'>");
    buf.append("Some texy text");
    buf.append("<br />"););
    buf.append("</div>");
    buf.append("</div><br /><br />");
buf.append("<div id='footer'>  Page <span id='pagenumber'/> of <span id='pagecount'/> </div>");

    buf.append("</body>");
    buf.append("</html>");

My pdf generates fine except for the fact that the header only appears on the first page and the footer only appears on the bottom of the last page. When I put the html through the w3c validator it came out fine, but when I used their CSS validator it said that their were parse errors in the line @page { size:8.5in 11in; padding:1em; @bottom-left { content: element(footer); } }

As far as I could tell from all the guides I was reading this was fine. I also heard that the W3C CSS validator was incomplete for CSS3 specs so I assumed it was the validator who was wrong.

If anyone could give me some tips of where to look or ideas it would make my week :)

p.s. Has to use Flying saucer R8 and/or iText 2.0.8

Mashhad answered 24/11, 2011 at 23:24 Comment(1)

Leaving a comment for future users: If the footer is not running on all pages for flyingsaucer make sure that footer element is BEFORE content which is unlike normal HTML pages. You can see the examples below by @Giovanni which shows that header and footer are before content. Your code is correct, it's just that header and footer have to be placed before content and it's very counter-intuitive – Cahoot 6/4, 2016 at 1:56

Here is a working example:

package com.sg2net.test;

import java.io.FileNotFoundException;
import java.io.FileOutputStream;

import org.xhtmlrenderer.pdf.ITextRenderer;

import com.lowagie.text.DocumentException;

public class XHTMLRenderer8 {

    /**
     * @author Giovanni Cuccu
     */
    public static void main(String[] args) throws FileNotFoundException, DocumentException {
        ITextRenderer renderer = new ITextRenderer();
        String content="<html><head><style>\n" +
          "div.header {\n" +
          "display: block; text-align: center;\n" + 
          "position: running(header);}\n" +
          "div.footer {\n" +
          "display: block; text-align: center;\n" + 
          "position: running(footer);}\n" +
          "div.content {page-break-after: always;}" +
          "@page { @top-center { content: element(header) }}\n " +
          "@page { @bottom-center { content: element(footer) }}\n" +
          "</style></head>\n" +
          "<body><div class='header'>Header</div><div class='footer'>Footer</div><div class='content'>Page1</div><div>Page2</div></body></html>";
        renderer.setDocumentFromString(content);
        renderer.layout();
        renderer.createPDF(new FileOutputStream("test.pdf"));

    }

}

This is using the following XHTML document

<html>
<head>
<style>
div.header {
    display: block; text-align: center; 
    position: running(header);
}
div.footer {
    display: block; text-align: center;
    position: running(footer);
}
div.content {page-break-after: always;}
@page {
     @top-center { content: element(header) }
}
@page { 
    @bottom-center { content: element(footer) }
}
</style>
</head>
<body>
    <div class='header'>Header</div>
    <div class='footer'>Footer</div>
    <div class='content'>Page1</div>
    <div>Page2</div>
</body>
</html>

Glaze answered 25/11, 2011 at 7:33 Comment(3)

Thanks, I ended up using this method and it worked perfectly for me :) – Mashhad 25/11, 2011 at 16:24

@Glaze , Is there any java based approach to add header and footer instead of adding it as html style? . Something similar to like PdfPageEventHelper present in IText. – Ammerman 13/11, 2018 at 7:18

@Ammerman none I'm aware of – Glaze 19/11, 2018 at 11:30

After researching and testing a lot, I just came up with a solution that really works.

You can control:

- header height by editing margin-top;

- footer height by editing margin-bottom;

- content width by editing div.content width.

Page numbers are displayed at footer.

See code below:

<html>
<head>
<style>

@page{

    @bottom-left {                 
        content: element(footer);  
        vertical-align: top;
        padding-top: 10px;
/*      border: solid red;    */
    }

    @top-right {
        content: element(header); 
        vertical-align: bottom;
        padding-bottom: 10px;
/*          border: solid green;   */
    }

    size: A4 portrait;
    margin-top:5.5cm; 
    margin-left:3cm; 
    margin-right:2cm; 
    margin-bottom:3.3cm; 
}

div.header {
    display: block;                     
    position: running(header);
    border-bottom: 1px solid black;
}

div.footer {
    margin-top: 0.5cm;
    display: block;
    position: running(footer);
    border-top: 1px solid black; 
}

div.content {
/*  border: solid purple;  */
    display: block;
    width: 15.4cm; 
    text-align: justify;
}

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

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

</style>
</head>
<body>

    <div class="header">
        This is the header that will repeat on every page at top
    </div>

    <div class="footer" >
        <p>This is the footer that will repeat on every page at bottom</p>
        <p>Page <span id="pagenumber"></span> of <span id="pagecount"></span></p>/
    </div>

    <div class="content">
        <p>This is the content</p><p>This is the content</p><p>This is the content</p>
        <p>This is the content</p><p>This is the content</p><p>This is the content</p>
        <p>This is the content</p><p>This is the content</p><p>This is the content</p>
        <p>This is the content</p><p>This is the content</p><p>This is the content</p>
        <p>This is the content</p><p>This is the content</p><p>This is the content</p>
        <p>This is the content</p><p>This is the content</p><p>This is the content</p>
        <p>This is the content</p><p>This is the content</p><p>This is the content</p>
        <p>This is the content</p><p>This is the content</p><p>This is the content</p>
        <p>This is the content</p><p>This is the content</p><p>This is the content</p>
        <p>This is the content</p><p>This is the content</p><p>This is the content</p>
        <p>This is the content</p><p>This is the content</p><p>This is the content</p>
        <p>This is the content</p><p>This is the content</p><p>This is the content</p>
        <p>This is the content</p><p>This is the content</p><p>This is the content</p>
    </div>

</body>
</html>

Hope it helps!!!

Delightful answered 23/10, 2015 at 17:52 Comment(1)

It works for me but in the second line of the footer is a useless slash - I guess – Golfer 24/5, 2023 at 14:45

for itext using java checkout this

public class HeaderAndFooter extends PdfPageEventHelper {

public void onEndPage (PdfWriter writer, Document document) {
    Rectangle rect = writer.getBoxSize("art");
    switch(writer.getPageNumber() % 2) {
    case 0:
        ColumnText.showTextAligned(writer.getDirectContent(),
                Element.ALIGN_RIGHT, new Phrase("even header"),
                rect.getBorderWidthRight(), rect.getBorderWidthTop(), 0);
        break;
    case 1:
        ColumnText.showTextAligned(writer.getDirectContent(),
                Element.ALIGN_CENTER, new Phrase(String.format("%d", writer.getPageNumber())),
                300f, 62f, 0);
        break;
    }
    ColumnText.showTextAligned(writer.getDirectContent(),
            Element.ALIGN_CENTER, new Phrase(String.format("%d", writer.getPageNumber())),
            (2f + 4f) / 2, 2f - 18, 0);
}
}

using below one in ur pdfwriter

HeaderAndFooter event = new HeaderAndFooter();
        writer.setPageEvent(event);

Tanner answered 25/11, 2011 at 6:23 Comment(2)

I used something like this previously but it didn't integrate with my flying saucer code very well. Still useful if you are only using iText without flying saucer :) – Mashhad 25/11, 2011 at 16:30

@Mashhad It does work with flyingsaurcer, you need to add PDFCreationListener to the renderer, here is simplified snippet (no formatting in a comment, sorry about that):

renderer.setListener(new PDFCreationListener() { ... public void preOpen(ITextRenderer iTextRenderer) { renderer.getWriter().setPageEvent(...); } ... });

- other methods can be empty. Also note that renderer here is an instance of ITextRenderer – Condensable 2/6, 2021 at 10:41

Recommended topics

Hot tags