是否有可能在每个打印页面上打印带有自定义页眉和页脚的HTML页面?
我想在每个打印页面的顶部和底部添加“UNCLASSIFIED”字样，字体为红色，Arial，大小为16pt，无论内容如何。
为了澄清，如果文档打印到5页上，那么每页都应该有自定义页眉和页脚。
有人知道使用HTML/CSS是否可行吗?
当前回答
我相信正确的答案是HTML 5和CSS3不支持在打印媒体中打印页眉和页脚。
虽然你可以用:
表 定位块
它们都有缺陷，使它们不能成为理想的通解。
其他回答
我相信正确的答案是HTML 5和CSS3不支持在打印媒体中打印页眉和页脚。
虽然你可以用:
表 定位块
它们都有缺陷，使它们不能成为理想的通解。
真正的技巧是使用position:固定使其显示在每个页面上，并使用<tfoot>元素来避免在多个页面上重叠。唯一的缺点是你需要知道页脚高度，但如果你使用JS，这可以是动态的。这样的$ (' .footer ') .height ($ (' .footer ')定格()中国当代().height())。可以使用<thead>以同样的方式添加标题。
@page { size: 8.5in 11in; } .page { page-break-after: always; } .footer { height: 75px; } .footer>div { position: fixed; bottom: 0; } body { font-size: 42px; font-family: sans-serif; } <button onclick="print()">print</button> <table> <tbody> <tr> <td> <div class="page">PAGE 1</div> <div class="page"> <div>PAGE 2 OVERFLOWING</div> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <div class="page">PAGE THREE</div> </td> </tr> </tbody> <tfoot> <tr> <td class="footer"> <div>© 1999 Footer Example</div> </td> </tr> </tfoot> </table>
从这个问题开始——将以下样式添加到仅打印的样式表中。此解决方案将在IE和Firefox中工作，但不适用于Chrome(截至版本21):
#header {
display: table-header-group;
}
#main {
display: table-row-group;
}
#footer {
display: table-footer-group;
}
穆罕默德·穆萨维的评论是最好的答案，所以这里出现了一个实际的答案:
在每页的顶部和底部自动重复标题/页脚。然而，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
如果你使用的是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>
