是否有可能在每个打印页面上打印带有自定义页眉和页脚的HTML页面?
我想在每个打印页面的顶部和底部添加“UNCLASSIFIED”字样，字体为红色，Arial，大小为16pt，无论内容如何。
为了澄清，如果文档打印到5页上，那么每页都应该有自定义页眉和页脚。
有人知道使用HTML/CSS是否可行吗?
当前回答
神奇的解决方案是把所有东西都放在一个表中。
标题:用于重复的标题。 Tfoot:重复的页脚。 Tbody:内容。
做一个单独的tr td，把所有东西都放在div里
代码:
<table class="report-container">
<thead class="report-header">
<tr>
<th class="report-header-cell">
<div class="header-info">
...
</div>
</th>
</tr>
</thead>
<tfoot class="report-footer">
<tr>
<td class="report-footer-cell">
<div class="footer-info">
...
</div>
</td>
</tr>
</tfoot>
<tbody class="report-content">
<tr>
<td class="report-content-cell">
<div class="main">
...
</div>
</td>
</tr>
</tbody>
</table>
table.report-container {
page-break-after:always;
}
thead.report-header {
display:table-header-group;
}
tfoot.report-footer {
display:table-footer-group;
}
额外:防止多页重叠。如:
<div class="main">
<div class="article">
...
</div>
<div class="article">
...
</div>
<div class="article">
...
</div>
...
...
...
</div>
这将导致溢出，将使内容在分页符内与页眉重叠。
所以>>使用:page-break-inside: avoid !与这类文章。
table.report-container div.article {
page-break-inside: avoid;
}
其他回答
这是你只想打印的东西吗?您可以将其添加到站点上的每个页面，并使用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生成的页面，您可以简单地将其编码到一个公共文件中。
编辑:
这个答案旨在提供一种方法，在文档的物理打印版本上显示某些内容，而不以其他方式显示。然而，正如评论所指出的，当内容溢出时，它并不能解决在多个打印页面上有一个页脚的问题。
我把它留在这里，以防它有帮助。
从这个问题开始——将以下样式添加到仅打印的样式表中。此解决方案将在IE和Firefox中工作，但不适用于Chrome(截至版本21):
#header {
display: table-header-group;
}
#main {
display: table-row-group;
}
#footer {
display: table-footer-group;
}
真正的技巧是使用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>
我的文档有很大的页眉和页脚，超过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，页脚不显示，我不知道根本原因。也许它在其他平台上也会有问题。
最好的解决方案来自biskrem muhammad。
但它的答案有一个小问题。当页数大于1时，页脚不在最后一页的页脚。
将这个小CSS添加到由footer-info折叠的元素中
position: fixed;
bottom: 0;
