有没有人有链接到文章或从 Chrome 重复页眉/页脚的工作示例？
背景：
我花了好几天没有运气，有几个 Stack 提出的解决方案，但似乎没有一个工作（在 Chrome 中）。由于我们在工作中使用 Chrome，我只在那里进行了测试，所以下面很多人说 Chrome 做不到，但也许我忽略了一些东西？
我尝试了这些堆栈链接（..还有更多）：
在所有浏览器（Chrome）上从网站打印的每个页面上打印页脚
如果我不能，请使用重复的页眉/页脚......那么我的下一个想法是计算我的克隆对象中的行并让它以最大数量中断，创建一个新页面（强制高度）并再次开始循环另一个 div 中的另一个页面。
我非常感谢有关运行页眉/页脚解决方案的任何建议，因为我的应用程序的重点是完成的打印提案。
好的，这个没有人接受，所以再环顾几天并选择不写我自己的解决方案，这就是我发现的。
在没有投票和评论的Stack 帖子的最底部是这个孤独的小链接： http ://welcome.totheinter.net/columnizer-jquery-plugin/#comment-53243
这东西太棒了，它旨在处理宽页面的内容并将它们格式化为像报纸一样的栏目。它处理分页符特别好，并且非常灵活。
就我而言，我需要一列（页面宽度）和重复的页眉和页脚。我使用示例 10 作为我的基础：http ://welcome.totheinter.net/autocolumn/sample10.html
我只是将链接添加到插件中，更改了必要的 ID 和类以适合我的页面，并对高度和宽度进行了一些小的 CSS 更改，我能够在 Google Chrome 中打印带有重复页眉和页脚的多页内容！（我公司的首选浏览器）
提示：
一个小小的 CSS 技巧，我将内容 div 设置为 MIN-HEIGHT，以便在短页面上将页脚向下推。（如果您希望用户可以选择纵向或横向，请不要这样做）。我的最终打印是固定的，所以这对我来说很棒。
我在内容上测试了不同的高度，看看它是如何破坏内容的，每次都很流畅。
我确实尝试在 JsBin 和 Fiddle 中发布我的最后一个示例，但每次都会出错。
同样，上面的示例 10 是一个很好的起点，因为它显示了之前和之后。
这是我最后的可变高度内容和重复页眉和页脚：（这是我在 Chrome 中单击浏览器打印链接/按钮时的视图）
更新 7/2014： Chrome 再次成为我存在打印问题的祸根。我看到下面关于我提供的链接的评论。他是对的，它渲染正确，但打印视图不正确。对此感到抱歉，但这仍然是学习设置的一个很好的例子。
我仍在使用这个解决方案，它确实有效，但是您必须调整 CSS 和 JS var 以适应正文内容的大小。尺寸组合非常敏感，但是当您获得正确的页面高度/宽度和正确的内容大小时，它确实有效。我必须为法律/信件的纸张尺寸编写单独的函数。它是有限的，但适用于我们的目的。
我还注意到，根据我的窗口大小，它并不总是看起来正确，但最终的 PRINTED 产品与重复的页眉和页脚一样符合预期，所以我使用了一个直接打印的窗口，因此用户不会注意到输出，而是看到了 chrome print 渲染。我讨厌这些类型的解决方法，但我办公室里的每个人都使用 Chrome，这是一个必要的邪恶。
这可能不是您问题的直接答案，但可能是您问题的直接解决方案。
在如何解决这个问题上花费了数天和数周之后，我终于放弃了在重复的页眉/页脚上使用直接 html/css 打印。我看过很多代码和示例，但每个人都不能满足我的需求，总是缺少或打印不正确。
我可以接受的解决方案是简单的 html、简单的 css 并将其转换为 pdf 的组合。您会惊讶于 html 结构和 css 是多么简单。
这个解决方案不完全是我的，而是上面的代码和 wkhtmltopdf 库的组合。请不要惊慌，这很容易安装，这正是我使用的 Windows (MSVC 2013) 版本 0.12.2.1，我有一个 Windows 7 64bit 和 xampp 作为我的堆栈。您可以按照本教程了解如何安装 wkhtmltopdf
安装后您应该能够生成此代码
<?php
// Test correct and failed output
// shell_exec('c:\wkhtmltopdf\bin\wkhtmltopdf --asdasdsadsad 2>> err1.txt 1>> out1.txt');
shell_exec('c:\wkhtmltopdf\bin\wkhtmltopdf --orientation Landscape C:\xampp\htdocs\test\Template.html google.pdf');
?>
<html>
<head>
</head>
<body>
<p>Magical ponies!</p>
</body>
</html>您在 php shell_exec() 中看到的 Template.html 的内容如下。让我快速解释一下这些参数是什么：
<!DOCTYPE html>
<html>
<head>
<style>
a{
color: black;
text-decoration: none;
}
a:hover{
cursor: inherit;
}
#main-report{
width: 100%;
}
table {
color: #333;
font-family: Helvetica, Arial, sans-serif;
width: 640px;
border-collapse: collapse;
border-spacing: 0;
}
td, th {
border: 1px solid transparent; /* No more visible border */
height: 30px;
font-size: 11px;
}
th {
background: #DFDFDF; /* Darken header a bit */
font-weight: bold;
}
td {
background: #FAFAFA;
text-align: center;
}
/* Cells in even rows (2,4,6...) are one color */
tr:nth-child(even) td { background: #F1F1F1; }
/* Cells in odd rows (1,3,5...) are another (excludes header cells) */
tr:nth-child(odd) td { background: #FEFEFE; }
table, tr, td, th, tbody, thead, tfoot {
page-break-inside: avoid !important;
}
</style>
</head>
<body>
<table id="main-report">
<thead>
<tr>
<th colspan="9">Inventory</th>
<th colspan="8">Inspection Report</th>
</tr>
<tr>
<th rowspan="2">Description</th>
<th rowspan="2">Serial No.</th>
<th rowspan="2">Qty</th>
<th rowspan="2">Unit Cost</th>
<th rowspan="2">Total Cost</th>
<th rowspan="2">Property No.</th>
<th rowspan="2">Date Acquired</th>
<th rowspan="2">Years in Service</th>
<th rowspan="2">Accumulated Depreciation</th>
<th colspan="5">Disposition</th>
<th rowspan="2">Appraisal 14</th>
<th rowspan="2">OR No.</th>
<th rowspan="2">Amount</th>
</tr>
<tr>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000001</td>
<td>11/03/2000</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000002</td>
<td>11/03/2015</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000003</td>
<td>11/03/2015</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>SN00001</td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000004</td>
<td>11/03/2015</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000005</td>
<td>11/03/2015</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000006</td>
<td>11/03/2015</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>faksdjfh skdjh h lsdjl ksd <br/> asdfjdhsfljshdfjksahdf <br/> jsdhfjsadhfjsahfkjsdhkjh</td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000007</td>
<td>11/03/2015</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000008</td>
<td>11/03/2015</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000009</td>
<td>11/03/2015</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000010</td>
<td>11/04/2015</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000011</td>
<td>11/04/2015</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script>
</script>
</body></html>[1]：
这个问题的答案取决于文档的结构。如果它可以构造为一系列简短、牢不可破的部分，那么你很幸运！有一种与 Chrome 兼容的方法可以模拟在此类文档中运行的页眉（实际上，它适用于所有流行的桌面浏览器）。
基本思想是将页眉的副本放在每个不可破坏部分的顶部，然后使用负边距隐藏副本，以便只有在分页符将该部分撞到下一页时才能看到它。不过，这有点过于简单化了，所以我建议在您自己的文档上尝试之前先研究下面的代码。
测试文档：
<!DOCTYPE html>
<html>
<head>
<style>
.section {
display: table;
width: 100%;
}
.section > div {
display: table-cell;
overflow: hidden;
}
.section ~ .section > div:before {
content: "";
display: block;
margin-bottom: -2.5em; /* inverse of header height */
}
.section > div > div {
page-break-inside: avoid;
display: inline-block;
width: 100%;
vertical-align: top;
}
.header {
height: 2.5em; /* header must have a fixed height */
}
.content { /* this rule set just adds space between sections and is not required */
margin-bottom: 1.25em;
}
</style>
</head>
<body>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
</body>
</html>
您不希望在文本块大于页面约 1/3 的文档中使用此技术，但它适用于包含小的、离散部分（例如表单和表格）的文档。
我对其他帖子的回答可能也很有趣。它展示了如何使用相同的基本原则创建与 Chrome 兼容的重复表标题，但所有额外的标记都是通过 javascript 添加的，因此它不会“污染”原始 HTML 文档。
我使用printThis来解决这个问题。您需要指定打印区域 id 或类名。