使用飞碟 (xHTMLRenderer) 和 iText 生成页眉/页脚答案

【问题标题】：Generating header/footer with flying saucer (xHTMLRenderer) and iText使用飞碟 (xHTMLRenderer) 和 iText 生成页眉/页脚
【发布时间】：2012-01-05 23:57:09
【问题描述】：

我意识到之前有人问过这个问题（我查看了所有解决方案并尝试了所有解决方案），但我仍在尝试生成一个带有在每一页上重复的页眉和页脚的 pdf 文档。

我正在使用flying saucer R8 和iText2.0.8 我已经尝试了许多不同的方法来使其工作，但到目前为止无济于事。我测试的一些方法是 https://gist.github.com/626264，使用运行元素和边距框 http://pigeonholdings.com/projects/flyingsaucer/R8/doc/guide/users-guide-R8.html#xil_40（css3 功能），飞碟 r7 的指南不适用于 r8 http://today.java.net/pub/a/today/2007/06/26/generating-pdfs-with-flying-saucer-and-itext.html#page-specific-features，还有许多其他方法没有为我工作。

我的页眉div 包含其他 2 个带有图像的 div，而我的页脚仅用于页码。 html 被放入名为 buf 的 StringBuffer 中。

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>");

我的 pdf 生成良好，除了页眉只出现在第一页而页脚只出现在最后一页的底部。当我通过 w3c 验证器将 html 放入时，结果很好，但是当我使用他们的 CSS 验证器时，它说他们在 @page { size:8.5in 11in; padding:1em; @bottom-left { content: element(footer); } } 行中出现解析错误

据我所知，我正在阅读的所有指南都很好。我还听说 W3C CSS 验证器对于 CSS3 规范是不完整的，所以我认为是验证器错了。

如果有人可以给我一些关于在哪里看的提示或想法，那会让我的一周:)

附言必须使用飞碟 R8 和/或 iText 2.0.8

【问题讨论】：

为未来的用户留下评论：如果页脚没有在所有页面上运行，请确保页脚元素位于内容之前，这与普通 HTML 页面不同。您可以通过@Giovanni 看到下面的示例，其中显示页眉和页脚位于内容之前。您的代码是正确的，只是页眉和页脚必须放在内容之前，这非常违反直觉

标签： java pdf itext flying-saucer

【解决方案1】：

对于使用 java 的 itext 签出此

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);
}
}

在你的 pdfwriter 中使用以下一个

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

【讨论】：

我以前使用过类似的东西，但它并没有很好地与我的飞碟代码集成。如果您只使用没有飞碟的 iText 仍然有用:)
@flyingCaffine 它确实适用于flyingsaurcer，您需要将PDFCreationListener 添加到渲染器，这里是简化的sn-p（评论中没有格式，对此感到抱歉）：renderer.setListener(new PDFCreationListener() { ... public void preOpen(ITextRenderer iTextRenderer) { renderer.getWriter().setPageEvent(...); } ... }); - 其他方法可以为空。另请注意，这里的renderer 是ITextRenderer 的一个实例

【解决方案2】：

这是一个工作示例：

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"));

    }

}

这是使用以下 XHTML 文档

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

【讨论】：

谢谢，我最终使用了这种方法，它对我来说非常有效:)
这正是我想要的。谢谢！
@Giovanni ，是否有任何基于 java 的方法来添加页眉和页脚而不是将其添加为 html 样式？ .类似于 IText 中的 PdfPageEventHelper 的东西。
@charle819 我不知道

【解决方案3】：

经过大量研究和测试，我想出了一个真正有效的解决方案。

你可以控制：

- 编辑 margin-top 的页眉高度；

- 通过编辑 margin-bottom 的页脚高度；

- 编辑 div.content 宽度的内容宽度。

页码显示在页脚。

见下面的代码：

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

希望对你有帮助！！！

【讨论】：