是否有可能在每个打印页面上打印带有自定义页眉和页脚的HTML页面?
我想在每个打印页面的顶部和底部添加“UNCLASSIFIED”字样，字体为红色，Arial，大小为16pt，无论内容如何。
为了澄清，如果文档打印到5页上，那么每页都应该有自定义页眉和页脚。
有人知道使用HTML/CSS是否可行吗?
当前回答
试试这个，对我来说，它可以在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>
其他回答
这是你只想打印的东西吗?您可以将其添加到站点上的每个页面，并使用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>
一种只适用于为每个页面添加标题的方法是将您的内容包装在<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%确定。
我相信正确的答案是HTML 5和CSS3不支持在打印媒体中打印页眉和页脚。
虽然你可以用:
表 定位块
它们都有缺陷，使它们不能成为理想的通解。
穆罕默德·穆萨维的评论是最好的答案，所以这里出现了一个实际的答案:
在每页的顶部和底部自动重复标题/页脚。然而，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
