是否有可能在每个打印页面上打印带有自定义页眉和页脚的HTML页面?
我想在每个打印页面的顶部和底部添加“UNCLASSIFIED”字样，字体为红色，Arial，大小为16pt，无论内容如何。
为了澄清，如果文档打印到5页上，那么每页都应该有自定义页眉和页脚。
有人知道使用HTML/CSS是否可行吗?
当前回答
使用换行符来定义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: page-break-before MDN:前 多栏布局 XHTML打印:第二版 Webkit Bug 5097: CSS2的page-break-after不能工作 打印HTML常见问题:程序是否尊重CSS样式，如分页后? 打印大型HTML表时如何处理换页
其他回答
使用换行符来定义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: page-break-before MDN:前 多栏布局 XHTML打印:第二版 Webkit Bug 5097: CSS2的page-break-after不能工作 打印HTML常见问题:程序是否尊重CSS样式，如分页后? 打印大型HTML表时如何处理换页
试试这个，对我来说，它可以在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>
如果你使用的是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>
最好的解决方案来自biskrem muhammad。
但它的答案有一个小问题。当页数大于1时，页脚不在最后一页的页脚。
将这个小CSS添加到由footer-info折叠的元素中
position: fixed;
bottom: 0;
从这个问题开始——将以下样式添加到仅打印的样式表中。此解决方案将在IE和Firefox中工作，但不适用于Chrome(截至版本21):
#header {
display: table-header-group;
}
#main {
display: table-row-group;
}
#footer {
display: table-footer-group;
}
