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

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

为了澄清,如果文档打印到5页上,那么每页都应该有自定义页眉和页脚。

有人知道使用HTML/CSS是否可行吗?


当前回答

这是你只想打印的东西吗?您可以将其添加到站点上的每个页面,并使用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生成的页面,您可以简单地将其编码到一个公共文件中。

编辑:

这个答案旨在提供一种方法,在文档的物理打印版本上显示某些内容,而不以其他方式显示。然而,正如评论所指出的,当内容溢出时,它并不能解决在多个打印页面上有一个页脚的问题。

我把它留在这里,以防它有帮助。

其他回答

我找到了一个解决这个问题的方法:

当你用“page”className分隔每一页时,你可以给“page”这个样式:

.page{
  height: 1150px;
  page-break-after: always;
  overflow: hidden;
}

检查打印页面的预览,确保所有内容都在页面内,否则移动内容,让所有内容看起来都很整齐。

一种只适用于为每个页面添加标题的方法是将您的内容包装在<table>中,然后将您的标题内容放在<thead>标签中,并将您的内容放在<tbody>标签中,如下所示:

<table>
  <thead>
    <tr>
      <th>This content appears on every page</th>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td>Put all your content here, it can span multiple pages and your header will show up at the top of each page</td>
     </tr>
   </tbody>
 </table>

这在Chrome上是有效的,对其他浏览器不是100%确定。

如果你想要作为页脚的元素,并将其设置为position:fixed和bottom:0,当页面打印时,它将在每个打印页面的底部重复该元素。同样的方法也适用于头元素,只需将top:0改为。

例如:

<div class="divFooter">UNCLASSIFIED</div>

CSS:

@media screen {
  div.divFooter {
    display: none;
  }
}
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
}

@Daniel在2012年对缺乏CSS3特性支持的问题做了一个评论:顶部中心和底部中心。

好吧,在Chrome 73+,下面的片段工作,其中页眉和页脚是<header></header>和<footer></footer>元素定义在页面内。

@page {
    @top-center { content: element(header) }
}
@page { 
    @bottom-center { content: element(footer) }
}

穆罕默德·穆萨维的评论是最好的答案,所以这里出现了一个实际的答案:

在每页的顶部和底部自动重复标题/页脚。然而,tfoot并不粘到最后一页的底部。

位置:固定打印将在每页重复,页脚将粘在所有页的底部,包括最后一页-但是,它不会为其内容创造空间。

把它们:

HTML:

<header>(repeated header)</header>

<table class=paging><thead><tr><td>&nbsp;</td></tr></thead><tbody><tr><td>

(content goes here)

</td></tr></tbody><tfoot><tr><td>&nbsp;</td></tr></tfoot></table>

<footer>(repeated footer)</footer>

CSS:

@page {
    size: letter;
    margin: .5in;
}

@media print {
    table.paging thead td, table.paging tfoot td {
        height: .5in;
    }
}

header, footer {
    width: 100%; height: .5in;
}

header {
    position: absolute;
    top: 0;
}

@media print {
    header, footer {
        position: fixed;
    }
    
    footer {
        bottom: 0;
    }
}

你可以在这里添加很多细节,但我故意将其削减到最少,以获得一个干净的渲染页眉和页脚,在屏幕上出现一次,在每个打印页面的顶部和底部出现一次。

https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a