使用飞碟，如何在页脚的每一页上生成一个带有页码和总页数的 pdf？
Posted
技术标签:
【中文标题】使用飞碟，如何在页脚的每一页上生成一个带有页码和总页数的 pdf？【英文标题】：With Flying Saucer, how do I generate a pdf with a page number and page total on every page at the footer? 【发布时间】：2013-07-31 00:02:16 【问题描述】：我花了更多的时间研究而不是自己想办法解决这个问题，所以我将在这里发布一个全面的答案。看起来这样做的信息分布在许多不同的网站上，我想把它放在一个地方。 This answer 可能是同样的东西，但我的眼睛呆滞，因为它在 Java 字符串中，而不是在 html 模板中。问题来了：
我正在渲染 PDF，我希望页面底部有一个页脚，上面写着“第 n 页，共 m”，其中“n”是您所在的页码，“m”是总页数文件。我该怎么做？
【问题讨论】：
【参考方案1】：在你的html中，你需要把它放在body标签的某个地方：
<div id="footer">
page <span id="pagenumber"></span> of <span id="pagecount"></span>
</div>
这应该是你的 CSS/样式：
#footer
position: running(footer);
text-align: right;
@page
@bottom-right
content: element(footer);
#pagenumber:before
content: counter(page);
#pagecount:before
content: counter(pages);
您可以了解有关@bottom-right 选项here 的更多信息。
【讨论】：
这个解决方案对我不起作用。它只出现在最后一页。 在哪里可以找到函数running() 和 element() 的定义/参考。没找到。我查看的页面之一：w3schools.com/cs-s-ref/css_functions.asp
@PauloOliveira 您解决了仅在最后一页显示的问题吗？我也遇到了。
@gideon 我使用了第二个答案，来自@john-mark。这条评论是关于这些功能的……因为我可以在官方页面或文档上找到它们的描述。
@PauloOliveira 当 在 中太远时，它仅显示在最后一页。将它放在更高的地方，以便在第一页结束之前打印。但约翰马克的答案更好。
【参考方案2】：
您也可以尝试更简洁的方法：
@page
@bottom-right
content: "Page " counter(page) " of " counter(pages);
你需要把它放在你的 css/style 中，你不需要添加额外的页脚 HTML 元素。
【讨论】：
我在使用此解决方案时遇到了问题。我在飞碟版本 9.1.4 上。更新到 9.1.5 解决了我的问题。 在 Spring Boot webapp 中完美运行，谢谢！对于新读者：这就是你所需要的，不必添加任何 div 等。【参考方案3】：重要错误和解决方案！
对于初学者，使用以下 John Mark 的解决方案是使其正常工作的正确方法：
@page
@bottom-right
content: "Page " counter(page) " of " counter(pages);
然而，很多人可能遇到了以下问题，您的PDF 已停止生成！
这可以通过更新您的 FLYING SAUCER 的VERSION来解决。
当我的 PDF 由于 @page 和 @bottom-right css 代码而停止生成时，我正在运行 9.1.4。
这是 Flying Saucer 中的一个小故障，已在 9.1.5 版本中修复！
确保更新到 9.1.5 并使用 John Mark 的答案。
【讨论】：
【参考方案4】：@John Mark 的解决方案对我有用。在我的应用程序中，我需要在 HTML 中嵌入样式信息，因此我将其包装在 <style> 标记中，并将其放在 <head> 之前的 <title> 中。也许这些信息对其他人有用。
【讨论】：
【参考方案5】：最受好评的答案对我不起作用，页脚只显示在最后一页。 （Daniel Kaplan 提供的答案下方的 cmets 中也提到了这种行为。）
以下评论提供了此问题的解决方案：
@PauloOliveira 它仅在 .将它放在更高的地方，以便在第一页结束之前打印。但约翰马克的答案更好。 – 爱德华 20 年 2 月 3 日 12:16
所以对我有用（使用 OpenPDF 的 FlyingSaucer 渲染）如下 - 将页脚元素的定义放在主要内容上方的某处并应用 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>
还有 CSS 代码：
@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);
【讨论】：
以上是关于使用飞碟，如何在页脚的每一页上生成一个带有页码和总页数的 pdf？的主要内容，如果未能解决你的问题，请参考以下文章