是否可以在每个打印页面上打印带有自定义页眉和页脚的HTML页面？
我想在每个打印页面的顶部和底部添加大小为16pt的红色，Arial字体的“ UNCLASSIFIED”一词，而不管其内容如何。
为了说明清楚，如果将文档打印在5页上，则每页应具有自定义的页眉和页脚。
有人知道使用HTML / CSS是否可能吗？
如何使用HTML在文档的每个打印页面上打印页眉和页脚？
第1988篇《如何使用HTML在文档的每个打印页面上打印页眉和页脚？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共14个回答
我找到了一种解决方案。基本思想是制作一张表，然后在ad部分中将标题的数据放入tr中，并通过css force强制将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>
如果您使用的是诸如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>如果可以使用javascipt，请让客户端句柄使用javascript布置内容，以根据可用空间放置元素。
您可以使用jquery columnizer插件在固定大小的块中动态布置内容，并将页眉和页脚定位为渲染例程的一部分。 http://welcome.totheinter.net/columnizer-jquery-plugin/
参见示例10 http://welcome.totheinter.net/autocolumn/sample10.html
如果在os中启用，浏览器仍然会添加自己的页眉或页脚。跨平台和浏览器的一致布局可能需要有条件的CSS。
这是您只想打印的东西吗？您可以将其添加到站点上的每个页面，然后使用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生成任何页面，则只需将其编码为一个公共文件即可。
编辑：
此答案旨在提供一种在文档的物理打印版本上显示某些内容而不会另外显示的方式。但是，正如评论所建议的那样，当内容溢出时，它不能解决在多个打印页面上放置页脚的问题。
如果有帮助，我会留在这里。
仅适用于在每个页面上添加页眉的一种方法是将您的内容包装在中<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％肯定。
我试图通过tfoot和css规则来进行这场徒劳的战斗，但是它仅适用于Firefox :(。使用纯CSS时，内容会在页脚上流动。当使用tfoot时，最后一页的页脚在底部的位置不会很好这是因为表格页脚用于表格，而不是物理页，已在Chrome 16，Opera 11，Firefox 3＆6和IE6上进行了测试。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Header & Footer test</title>
<style>
@media screen {
div#footer_wrapper {
display: none;
}
}
@media print {
tfoot { visibility: hidden; }
div#footer_wrapper {
margin: 0px 2px 0px 7px;
position: fixed;
bottom: 0;
}
div#footer_content {
font-weight: bold;
}
}
</style>
</head>
<body>
<div id="footer_wrapper">
<div id="footer_content">
Total 4923
</div>
</div>
<TABLE CELLPADDING=6>
<THEAD>
<TR> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH> <TH>Qty</TH> </TR>
</THEAD>
<TBODY>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD> <TD>639</TD> </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD> </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD> <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD> <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD> <TD>908</TD> </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD> </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD> <TD>272</TD> </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD> <TD>639</TD> </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD> </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD> <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD> <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD> <TD>908</TD> </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD> </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD> <TD>272</TD> </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD> <TD>639</TD> </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD> </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD> <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD> <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD> <TD>908</TD> </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD> </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD> <TD>272</TD> </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD> <TD>639</TD> </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD> </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD> <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD> <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD> <TD>908</TD> </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD> </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD> <TD>272</TD> </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD> <TD>639</TD> </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD> </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD> <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD> <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD> <TD>908</TD> </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD> </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD> <TD>272</TD> </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD> <TD>639</TD> </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD> </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD> <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD> <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD> <TD>908</TD> </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD> </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD> <TD>272</TD> </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD> <TD>639</TD> </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD> </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD> <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD> <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD> <TD>908</TD> </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD> </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD> <TD>272</TD> </TR>
</TBODY>
<TFOOT id="table_footer">
<TR> <TH ALIGN=LEFT COLSPAN=3>Total</TH> <TH>4923</TH> </TR>
</TFOOT>
</TABLE>
</body>
</html>
神奇的解决方案实际上是将所有内容都放在一个表中。
thead：用于重复的标头。
tfoot：重复的页脚。
正文：内容。
并做一个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;
}
extra：防止与多个页面重叠。喜欢：
<div class="main">
<div class="article">
...
</div>
<div class="article">
...
</div>
<div class="article">
...
</div>
...
...
...
</div>
这会导致溢出，使内容与分页符内的标题重叠。
so >> use：page-break-inside: avoid !important;与此类article。
table.report-container div.article {
page-break-inside: avoid;
}
非常简单，希望这能为您带来最佳效果。
最好的祝福。;）
来源 ..
使用分页符定义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>
参考文献
我多年来一直在寻找解决方案，并且找到了有关如何打印可在不重叠页面内容的情况下在多个页面上使用的页脚的文章。
我的要求是IE8，到目前为止，我发现它在Chrome中不起作用。[ 更新 ]截至2018年3月1日，它也适用于Chrome
本示例通过设置css样式来使用表格和tfoot元素：
tfoot {display: table-footer-group;}
我相信正确的答案是HTML 5和CSS3不支持在print媒体中打印页面页眉和页脚。
尽管您可以使用以下方法进行模拟：
- 桌子
- 固定位置块
它们每个都有导致它们无法成为理想的通用解决方案的错误。
如果您将要用作页脚的元素并将其设置为position：fixed和bottom：0，则在打印页面时，它将在每个打印页面的底部重复该元素。对于标头元素同样如此，只需设置top：0即可。
例如：
<div class="divFooter">UNCLASSIFIED</div>
CSS：
@media screen {
div.divFooter {
display: none;
}
}
@media print {
div.divFooter {
position: fixed;
bottom: 0;
}
}
相似问题
问题类别
根据一些帖子，我认为
position: fixed对我有用。在Chrome中按Ctrl + P可以看到每页的页眉和页脚文本。希望能帮助到你