使用 CSS 在 PDF 的每一页中添加页脚文本

Posted 2023-02-24

【中文标题】使用 CSS 在 PDF 的每一页中添加页脚文本

【英文标题】：Add footer text in each page of PDF using CSS

【发布时间】：2015-09-03 21:17:06

【问题描述】：

我需要在 PDF 的每一页中应用页眉和页脚文本，因为我正在使用 CSS 的下面一行。通过这个，我可以在每个页面中应用页眉文本，但不能在页脚文本中应用。我只在 PDF 的最后一页获取页脚文本。

   @@page 
         @@top 
                content: element(header);
            

            @@bottom 
                content: element(footer);
            
        

        header 
            padding: 10px;
            position: running(header);
            

     footer 
            padding: 5px;
            position: running(footer);
         

【参考方案1】：

我假设您正在使用 dompdf 之类的东西从 html 生成 PDF。如果不是，我道歉并在其他地方发现了与此类似的代码，它会在所有页面上生成页眉和页脚。这似乎适用于从浏览器和 PDF 正常打印。

CSS

<style type="text/css">
<!-- 
@page 
 margin: 2cm;


.header, .footer
 position: absolute;


.footer
 bottom:0;
 height: 40px;


.header
 top: 0;
 height: 40px;
 

.content
 margin-top: 45px;
 margin-bottom: 45px;

-->
</style>

HTML 代码

<div class="header">
  Header html goes here
</div>
<div class="content">
  page content goes here
</div>
<div class="footer">
  footer code goes here
</div>

添加内容类以及在元素页眉和页脚中指定的高度有助于阻止内容只写在每个页面的页眉和页脚中。

【参考方案2】：

我有同样的问题，问题是你必须把“页脚”和“页眉”的 div 放在页面的顶部，否则页脚将不起作用。不知道为什么...

【参考方案3】：

#footer 
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;


#footer p 
  border-top: 2px solid #555555;
  margin-top:10px;

<div id="footer">
  <p>footer text</p>
</div>

【讨论】：

这个答案可以通过评论你做了什么以及它为什么起作用来改进。