是否有可能在每个打印页面上打印带有自定义页眉和页脚的HTML页面?
我想在每个打印页面的顶部和底部添加“UNCLASSIFIED”字样，字体为红色，Arial，大小为16pt，无论内容如何。
为了澄清，如果文档打印到5页上，那么每页都应该有自定义页眉和页脚。
有人知道使用HTML/CSS是否可行吗?
当前回答
我的文档有很大的页眉和页脚，超过250px。页眉、页脚需要贴在文档的顶部和末尾。我的解决方案结合了Biskrem Muhammad和Chris Moschini的两个想法。
的想法:
把你的头放在<thead>像Biskrem的 把你的页脚放在<div class="footer">像克里斯的
HTML:
<body>
<table class="report-container">
<thead class="report-header">
<tr>
<th class="report-header-cell">
<div class="header-info">
(your header)
</div>
</th>
</tr>
</thead>
<tbody class="report-content">
<tr>
<td class="report-content-cell">
<div class="main">
(your body)
</div>
</td>
</tr>
</tbody>
<tfoot class="report-footer">
<tr>
<td>
<div class="footer-space"> </div>
</td>
</tr>
</tfoot>
</table>
<div class="footer">
(your footer)
</div>
</body>
CSS:
table.report-container {
page-break-after:always;
width: 100%;
}
thead.report-header {
display:table-header-group;
}
tfoot.report-footer {
display:table-footer-group;
}
.footer-space, .footer {
height: 270px;// this is my footer height
}
.footer {
position: fixed;
bottom: 0;
}
@media print {
tr td {
word-wrap: break-word;
overflow-wrap: break-word;
}
}
我使用ejs来生成html进行打印，所以我不需要在正常网页的显示上工作。
问题:这在Chrome打印机中工作，但在我的代码中的Safari，页脚不显示，我不知道根本原因。也许它在其他平台上也会有问题。
其他回答
多年来，我一直在寻找一个解决方案，并找到了这篇关于如何在多个页面上打印一个页脚而不重叠页面内容的文章。
我的要求是IE8，到目前为止，我发现这不能在Chrome中工作。从2018年3月1日起，它也可以在Chrome浏览器中使用
下面的例子通过设置css样式来使用表格和tfoot元素:
tfoot {display: table-footer-group;}
@Daniel在2012年对缺乏CSS3特性支持的问题做了一个评论:顶部中心和底部中心。
好吧，在Chrome 73+，下面的片段工作，其中页眉和页脚是<header></header>和<footer></footer>元素定义在页面内。
@page {
@top-center { content: element(header) }
}
@page {
@bottom-center { content: element(footer) }
}
这是你只想打印的东西吗?您可以将其添加到站点上的每个页面，并使用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生成的页面，您可以简单地将其编码到一个公共文件中。
编辑:
这个答案旨在提供一种方法，在文档的物理打印版本上显示某些内容，而不以其他方式显示。然而，正如评论所指出的，当内容溢出时，它并不能解决在多个打印页面上有一个页脚的问题。
我把它留在这里，以防它有帮助。
穆罕默德·穆萨维的评论是最好的答案，所以这里出现了一个实际的答案:
在每页的顶部和底部自动重复标题/页脚。然而，tfoot并不粘到最后一页的底部。
位置:固定打印将在每页重复，页脚将粘在所有页的底部，包括最后一页-但是，它不会为其内容创造空间。
把它们:
HTML:
<header>(repeated header)</header>
<table class=paging><thead><tr><td> </td></tr></thead><tbody><tr><td>
(content goes here)
</td></tr></tbody><tfoot><tr><td> </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
试试这个，对我来说，它可以在Chrome, Firefox和Safari上运行。您将获得固定的页眉和页脚到每个页面，而不重叠的页面内容
CSS
<style>
@page {
margin: 10mm;
}
body {
font: 9pt sans-serif;
line-height: 1.3;
/* Avoid fixed header and footer to overlap page content */
margin-top: 100px;
margin-bottom: 50px;
}
#header {
position: fixed;
top: 0;
width: 100%;
height: 100px;
/* For testing */
background: yellow;
opacity: 0.5;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
font-size: 6pt;
color: #777;
/* For testing */
background: red;
opacity: 0.5;
}
/* Print progressive page numbers */
.page-number:before {
/* counter-increment: page; */
content: "Pagina " counter(page);
}
</style>
HTML
<body>
<header id="header">Header</header>
<footer id="footer">footer</footer>
<div id="content">
Here your long long content...
<p style="page-break-inside: avoid;">This text will not be broken between the pages</p>
</div>
</body>
