是否有可能在每个打印页面上打印带有自定义页眉和页脚的HTML页面?
我想在每个打印页面的顶部和底部添加“UNCLASSIFIED”字样，字体为红色，Arial，大小为16pt，无论内容如何。
为了澄清，如果文档打印到5页上，那么每页都应该有自定义页眉和页脚。
有人知道使用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>
其他回答
试试这个，对我来说，它可以在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中的样式:
@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表时如何处理换页
我找到了一个解决这个问题的方法:
当你用“page”className分隔每一页时，你可以给“page”这个样式:
.page{
height: 1150px;
page-break-after: always;
overflow: hidden;
}
检查打印页面的预览，确保所有内容都在页面内，否则移动内容，让所有内容看起来都很整齐。
我相信正确的答案是HTML 5和CSS3不支持在打印媒体中打印页眉和页脚。
虽然你可以用:
表 定位块
它们都有缺陷，使它们不能成为理想的通解。
根据我的工作经验，我想我的职位是:固定工作。
body { background: #eaeaed; -webkit-print-color-adjust: exact; } .my-footer { background: #2db34a; bottom: 0; left: 0; position: fixed; right: 0; } .my-header { background: red; top: 0; left: 0; position: fixed; right: 0; } <html> <head> <meta charset=utf-8 /> <title>Header & Footer</title> </head> <body> <div> <div class="my-header">Fixed Header</div> <div class="my-footer">Fixed Footer</div> <table> <thead> <tr> <th>TH 1</th> <th>TH 2</th> </tr> </thead> <tbody> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> </tbody> </table> </div> </body> </html>
在chrome中按Ctrl+P查看每页的页眉和页脚文本。 希望能有所帮助
