在Chrome中打印重复的页眉
有没有人有专门针对Chrome重复页眉/页脚的文章或工作示例的链接？
背景：
我花了好几天没有运气，有几个Stack提出的解决方案，但似乎没有工作（在Chrome中）。由于我们在工作中使用Chrome，我只在那里测试过，所以下面有很多人说Chrome无法做到，但也许我忽视了一些事情？
我尝试了这些Stack链接（..还有更多）：
Print footer on every printed page from website, across all browsers (Chrome)
Is there a way to get a web page header/footer printed on every page?
How to use HTML to print header and footer on every printed page of a document?
Creating page headers and footers using CSS for print
如果我不能，请使用重复的页眉/页脚...然后我的下一个想法是计算我的克隆对象中的行并让它以最大数量打破，创建一个新页面（强制高度）并启动再次在另一个div的另一页中循环。
我非常感谢有关运行页眉/页脚解决方案的任何建议，因为我的应用程序的重点是完成的打印提案。
5 个答案:
答案 0 :(得分：24)
好的，没有接受这个，所以再过几天环顾四周，选择不写自己的解决方案，这就是我找到的。
在Stack post的最底层，没有投票，没有评论是这个孤独的小链接：http://welcome.totheinter.net/columnizer-jquery-plugin/#comment-53243
这件事很棒，它设计用于处理大量内容并将其格式化为像报纸一样的列。它处理分页特别好，非常灵活。
在我的情况下，我需要一个列（页面宽度）和重复页眉和页脚。我使用Example 10作为我的基础：http://welcome.totheinter.net/autocolumn/sample10.html
我只是添加了插件的链接，更改了必要的ID和类以适应我的页面，并对高度和宽度进行了一些小的CSS更改，我能够打印带有重复页眉和页脚的多页内容谷歌浏览器！ （我公司的首选浏览器）
TIPS：
-
一个小小的CSS技巧，我将内容div MIN-HEIGHT设置为如此 在短篇页面上将页脚向下推。 （如果您希望用户选择纵向或横向，请不要这样做）。我的最终版本是固定的，所以这对我来说很棒。
-
我测试了内容的不同高度，看它是如何打破内容的，每次都很顺利。
我确实尝试在JsBin和Fiddle中发布我的最后一个例子，但每次都会出错。
同样，上面的示例10是一个很好的开始，因为它显示在之前和之后。
这是我的最终版本，可变高度内容并重复页眉和页脚：
（这是我在Chrome中点击浏览器打印链接/按钮时的视图）
更新7/2014： Chrome再次成为我存在打印问题的祸根。我在下面看到了关于我提供的链接的评论。他是对的，它渲染正确，但打印视图不正确。对此感到抱歉，但这仍然是一个很好的例子来学习设置。
我仍在使用此解决方案，IT可以正常工作，但您必须调整CSS和JS var以获取正文内容大小。大小调整组合非常敏感，但是当您获得正确的页面高度/宽度和正确的内容大小时，它确实有效。我必须为纸张尺寸legal / letter写单独的函数。它有限但适用于我们的目的。
我还注意到，根据我的窗口大小，它并不总是看起来正确，但是最终的PRINTED产品与重复的页眉和页脚一样符合预期，所以我使用了一个直接打印的窗口，因此用户没有注意输出，而是看到了chrome打印渲染。我讨厌这些类型的解决方法，但我办公室里的每个人都使用Chrome，这是一个必要的恶魔。
答案 1 :(得分：3)
这可能不是您问题的直接答案，但可能是您问题的直接解决方案。
在如何解决这个问题的几天和几周之后，我终于放弃了在重复页眉/页脚上使用直接html / css打印。我已经看过很多代码和样本，但是他们每个人都不能满足我的需求，总是缺少或者没有正确的打印正确。
我可以接受的解决方案是简单的html，简单的css和将其转换为pdf的组合。你会惊讶于html结构和css的简单。
此解决方案并非完全是我的，而是上面的代码和wkhtmltopdf库的组合。请不要惊慌这是非常容易安装，这是我完全使用Windows（MSVC 2013）版本0.12.2.1，我有一个Windows 7 64位与xampp作为我的堆栈。您可以按照本教程了解如何Install 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内容如下所示。让我快速解释一下这些参数是什么：
- c：\ wkhtmltopdf \ bin \ wkhtmltopdf - 这是您安装wkhtmltopdf的地方，您可以自行决定位置，但为了使其可访问，我使用C：驱动就像教程中的内容一样。
- - orientation Landscape - 这些是可选参数之一，您可以参考其官方文档了解您可以使用这些设置做的更多事情。
- C：\ xampp \ htdocs \ test \ Template.html - 这是您要转换的html文件的位置，遗憾的是我认为您无法直接输入html字符串。
- google.pdf - 生成文件的名称和位置。
<!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]：
答案 2 :(得分：2)
这个问题的答案取决于文档的结构。如果它可以被构造为一系列简短，不易破碎的部分，那么你很幸运！有一种与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页的文档中使用此技术，但它适用于由小型离散部分组成的文档，例如表单和表格
我对this other post的回答也可能有意义。它显示了如何使用相同的基本原则创建与Chrome兼容的重复表标题，但所有额外标记都是通过javascript添加的，因此它不会污染＆＃34;污染＆＃34;最初的HTML文档。
答案 3 :(得分：0)
不幸的是，这是一个已知的webkit错误（Chrome和Safari） - see here。我试图多次找到一种解决方法，但没有运气。
从浏览器打印时，链接到accepted answer的示例似乎不起作用。
答案 4 :(得分：0)
我使用printThis来解决问题。您需要指定打印区域ID或类名。
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？