在 Chrome 中打印重复的页眉 [关闭]
Posted
技术标签:
【中文标题】在 Chrome 中打印重复的页眉 [关闭]【英文标题】：Print repeating Page headers in Chrome [closed] 【发布时间】：2013-11-07 22:27:46 【问题描述】：有没有人有文章的链接或专门从 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 中的另一个页面中再次循环。
我非常感谢有关运行页眉/页脚解决方案的任何建议，因为我的应用程序的重点是完成的打印提案。
【问题讨论】：
Repeating table headers on printed pages 于 2016 年 6 月 5 日在 Chrome 上修复。我在 Mac OS X 上安装了 51.0.2704.103 版本，它可以工作。 【参考方案1】：好的，这个没有人接受，所以再环顾几天并选择不编写自己的解决方案，这就是我发现的。
在Stack post 的最底部，没有投票也没有 cmets，是这个孤独的小链接：http://welcome.totheinter.net/columnizer-jquery-plugin/#comment-53243
这东西太棒了，它旨在处理宽页面的内容并将它们格式化为像报纸一样的栏目。它对分页符的处理特别好，而且非常灵活。
就我而言，我需要一列（页面宽度）和重复的页眉和页脚。我使用示例 10 作为我的基础：http://welcome.totheinter.net/autocolumn/sample10.html
我只是将链接添加到插件中，更改了必要的 ID 和类以适合我的页面，并对高度和宽度进行了一些小的 CSS 更改，我能够打印带有重复页眉和页脚的多页内容谷歌浏览器！ （我公司的首选浏览器）
提示：
一个 CSS 小技巧，我将内容 div 设置为 MIN-HEIGHT 在短页面上将页脚向下推。 （如果您希望用户可以选择纵向或横向，请不要这样做）。我的最终打印已修复，所以这对我来说很棒。
我测试了不同高度的内容，看看它是如何破坏内容的，每次都很流畅。
我确实尝试在 JsBin 和 Fiddle 中发布我的最后一个示例，但每次都会出错。
同样，上面的示例 10 是一个很好的起点，因为它显示了之前和之后。
这是我的最终内容，内容高度可变，页眉和页脚重复： （这是我在 Chrome 中单击浏览器 Print Link/Button 时的视图）
2014 年 7 月更新： Chrome 再次成为我存在打印问题的祸根。我看到下面关于我提供的链接的评论。他是对的，它渲染正确，但打印视图不正确。很抱歉，但它仍然是学习设置的好例子。
我仍在使用此解决方案，它确实有效，但您必须调整 CSS 和 JS var 以适应正文内容的大小。尺寸组合非常敏感，但是当您获得正确的页面高度/宽度和正确的内容大小时，它确实有效。我必须为法律/信件的纸张尺寸编写单独的函数。它是有限的，但适用于我们的目的。
我还注意到，根据我的窗口大小，它并不总是看起来正确，但最终的 PRINTED 产品与预期的一样，带有重复的页眉和页脚，所以我使用了一个直接打印的窗口，所以用户没有注意输出，而是看到 chrome 打印渲染。我讨厌这些类型的解决方法，但我办公室里的每个人都使用 Chrome，这是一个必要的邪恶。
【讨论】：
@zipper72 : 你能给我一个你打印出来的答案代码吗？ 这是一个很好的解决方案，谢谢！我的修复：.page height:958px .page .content min-height:###px; 。根据您的页眉/页脚高度调整内容min-height 和var content_height。
这是否会考虑具有 page-break-before 和 page-break-inside 的元素：避免样式？换句话说，如果浏览器不是完全基于内容的高度来动态创建页面（page-break-inside：避免即使没有完整的内容页面高度也会破坏页面），标题仍然会正确放置吗？
【参考方案2】：
这可能不是您问题的直接答案，但可能是您问题的直接解决方案。
在如何解决这个问题上花费了数天和数周后，我终于放弃了在重复的页眉/页脚上使用直接 html/css 打印。我看过很多代码和示例，但每个人都不能满足我的需求，总是丢失或打印不正确。
我可以接受的解决方案是简单的 html、简单的 css 并将其转换为 pdf 的组合。您会惊讶于 html 结构和 css 是多么简单。
这个解决方案不完全是我的，而是上面的代码和 wkhtmltopdf 库的组合。请不要惊慌，这很容易安装，这正是我使用的 Windows (MSVC 2013) 版本 0.12.2.1，我有一个 Windows 7 64bit 和 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>here is the final result
[1]：
【讨论】：
【参考方案3】：这个问题的答案取决于您的文档的结构。如果它可以被构建为一系列简短的、牢不可破的部分，那么您很幸运！有一种与 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 的文档中使用此技术，但它适用于包含小的、离散部分（例如表单和表格）的文档。
我对@987654321@ 的回答可能也很有趣。它展示了如何使用相同的基本原理创建与 Chrome 兼容的重复表标题，但所有额外的标记都是通过 javascript 添加的，因此它不会“污染”原始 HTML 文档。
【讨论】：
【参考方案4】：我使用printThis 来解决这个问题。您需要指定打印区域 id 或类名。
【讨论】：
【参考方案5】：不幸的是，这是一个已知的 webkit 错误（Chrome 和 Safari）-see here。我曾多次尝试找到解决方法，但都没有成功。
当您从浏览器打印时，链接到 accepted answer 的示例似乎不起作用。
【讨论】：
是的，我也看到了，对不起大家。从好的方面来说，我仍在使用这个解决方案，它确实有效，但你必须摆弄 CSS 和 JS 正文内容的大小。它非常敏感，但是当您获得正确的页面高度/宽度和正确的内容大小时，它确实有效。 -该以上是关于在 Chrome 中打印重复的页眉 [关闭]的主要内容，如果未能解决你的问题，请参考以下文章
为啥word里的页眉页脚设置好了，关闭页眉页脚对话框，页面上不显示页眉页脚？