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

Question

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

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

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

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

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

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

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

Answer 2

我有同样的问题，问题是你必须在页面顶部放置“页脚”和“标题”div，否则页脚将无法正常工作。不明白为什么......

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