如何使用HTML在文档的每一个打印页面上打印页眉和页脚？

是否能够在每一个打印页面上打印带有自定义页眉和页脚的HTML页面？

我想在每一个打印页面的顶部和底部添加大小为16pt的红色，Arial字体的“ UNCLASSIFIED”一词，而无论其内容如何。

为了说明清楚，若是将文档打印在5页上，则每页应具备自定义的页眉和页脚。

有人知道使用HTML / CSS是否可能吗？

---

#1楼

使用分页符定义CSS中的样式：

@media all
  {
  #page-one, .footer, .page-break { display:none; }
  }

@media print
  {
  #page-one, .footer, .page-break   
    { 
    display: block;
    color:red; 
    font-family:Arial; 
    font-size: 16px; 
    text-transform: uppercase; 
    }
  .page-break
    {
    page-break-before:always;
    } 
}

而后将标记添加到文档中的适当位置：

<h2 id="page-one">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>

参考文献

• CSS分页媒体：分页符

• MDN：分页前

• MDN：先入为主

• 多列布局

• XHTML打印：第二版

• Webkit错误5097：CSS2分页后没法使用

• 打印HTML常见问题解答：程序会尊重CSS样式，例如分页后吗？

• 打印大型HTML表格时如何处理分页符

---

#2楼

从这个问题开始 -将如下样式添加到仅打印样式表中。 此解决方案将在IE和Firefox中运行，但不能在Chrome （自21版开始）中运行：

#header {
  display: table-header-group;
}

#main {
  display: table-row-group;
}

#footer {
  display: table-footer-group;
}

---

#3楼

这是您只想打印的东西吗？ 您能够将其添加到网站上的每一个页面，而后使用CSS将标记定义为仅打印介质。

例如，这多是示例标头：

<span class="printspan">UNCLASSIFIED</span>

而后在CSS中执行如下操做：

<style type="text/css" media="screen">
    .printspan
    {
        display: none;
    }
</style>
<style type="text/css" media="print">
    .printspan
    {
        display: inline;
        font-family: Arial, sans-serif;
        font-size: 16 pt;
        color: red;
    }
</style>

最后，要在每一个页面上包含页眉/页脚，您可使用服务器端包含，或者若是您使用PHP或ASP生成任何页面，则只需将其编码到一个通用文件中便可。

编辑：

此答案旨在提供一种在文档的物理打印版本上显示某些内容而不会另外显示的方式。 可是，正如评论所暗示的那样，当内容溢出时，它不能解决在多个打印页面上放置页脚的问题。

若是有帮助，我会留在这里。

---

#4楼

若是可使用javascipt，请让客户端句柄使用javascript布置内容，以根据可用空间放置元素。

您可使用jquery columnizer插件在固定大小的块中动态布置内容，并将页眉和页脚定位为渲染例程的一部分。 http://welcome.totheinter.net/columnizer-jquery-plugin/

参见示例10 http://welcome.totheinter.net/autocolumn/sample10.html

若是在os中启用，浏览器仍会添加本身的页眉或页脚。 跨平台和浏览器的一致布局可能须要有条件的CSS。

---

#5楼

我多年来一直在寻找解决方案，而且找到了有关如何打印可在多个页面上使用而页内容没有重叠的页脚的文章。

个人要求是IE8，到目前为止，我发现这在Chrome中不起做用。 [ 更新 ]截至2018年3月1日，它也适用于Chrome浏览器

本示例经过设置css样式来使用表格和tfoot元素：

tfoot {display: table-footer-group;}