Question

我需要申请Header＆amp;在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>

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

3 个答案: