是否有可能在每个打印页面上打印带有自定义页眉和页脚的HTML页面?
我想在每个打印页面的顶部和底部添加“UNCLASSIFIED”字样，字体为红色，Arial，大小为16pt，无论内容如何。
为了澄清，如果文档打印到5页上，那么每页都应该有自定义页眉和页脚。
有人知道使用HTML/CSS是否可行吗?
当前回答
最好的解决方案来自biskrem muhammad。
但它的答案有一个小问题。当页数大于1时，页脚不在最后一页的页脚。
将这个小CSS添加到由footer-info折叠的元素中
position: fixed;
bottom: 0;
其他回答
这是你只想打印的东西吗?您可以将其添加到站点上的每个页面，并使用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生成的页面，您可以简单地将其编码到一个公共文件中。
编辑:
这个答案旨在提供一种方法，在文档的物理打印版本上显示某些内容，而不以其他方式显示。然而，正如评论所指出的，当内容溢出时，它并不能解决在多个打印页面上有一个页脚的问题。
我把它留在这里，以防它有帮助。
如果你使用的是Asp.net Razor engine或Angular这样的模板引擎， 我认为您必须重新生成您的页面，并将页面分为几个页面，然后您可以自由地标记每个页面，并将页眉和页脚放在主题上。 一个例子如下:
@page { size: A4; margin: .9cm; } @media print { body.print-paper-a4 { width: 210mm; height: 297mm; } body { background: white; margin: 0; padding: 0; } .print-stage, .no-print { display: none; } body.print-paper.a4 .print-paper { width: 210mm; height: 297mm; } .print-paper { page-break-after: always; margin: 0; padding: .8cm; border:none; overflow: hidden; } } .print-papers { display: block; z-index: 2000; margin: auto; } body.print-paper-a4 .print-paper { width: 21cm; height:27cm; } .print-paper { margin: auto; background: white; border: 1px dotted black; box-sizing: border-box; margin: 1cm auto; padding: .8cm; overflow: hidden; } body.print-mode .no-print-preview { display: none; } body.print-mode .print-preview { display: block; } <body class="print-mode print-paper-a4"> <div class="print-papers print-preview"> <div class="print-paper"> <div style="font-size: 5cm"> HELLO </div> </div> <div class="print-paper"> <div class="page-header"> </div> </div> <div class="print-paper"> </div> </div> </body>
如果你可以使用javascipt，让客户端处理使用javascript布局内容，根据可用空间放置元素。
你可以使用jquery columnizer插件在固定大小的块中动态布局你的内容，并将你的页眉和页脚作为渲染例程的一部分。 http://welcome.totheinter.net/columnizer-jquery-plugin/
参见例10 http://welcome.totheinter.net/autocolumn/sample10.html
如果在操作系统中启用，浏览器仍然会添加自己的页眉或页脚。跨平台和浏览器的一致布局可能需要有条件的css。
我找到了一个解决方案。基本的想法是做一个表，在头部部分放置tr头部的数据，并通过css强制显示tr只在打印而不是在屏幕上，然后你的正常头部应该强制只在屏幕上显示而不是在打印。100%打印多页。示例代码在这里
<style>
@media screen {
.only_print{
display:none;
}
}
@media print {
.no-print {
display: none !important;
}
}
TABLE{border-collapse: collapse;}
TH, TD {border:1px solid grey;}
</style>
<div class="no-print"> <!-- This is header for screen and will not be printed -->
<div>COMPANY NAME FOR SCREEN</div>
<div>DESCRIPTION FOR SCREEN</div>
</div>
<table>
<thead>
<tr class="only_print"> <!-- This is header for print and will not be shown on screen -->
<td colspan="100" style="border: 0px;">
<div>COMPANY NAME FOR PRINT</div>
<div>DESCRIPTION FOR PRINT</div>
</td>
</tr>
<!-- From here Actual Data of table start -->
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</tbody>
</table>
如果你想要作为页脚的元素，并将其设置为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;
}
}
