如何在 Chrome 中的每个打印页面上打印部分网页（标题）
Posted
技术标签:
【中文标题】如何在 Chrome 中的每个打印页面上打印部分网页（标题）【英文标题】：How to print part of a webpage (header) on each printed page in Chrome 【发布时间】：2016-04-05 04:02:09 【问题描述】：我正在编写发票打印脚本。发票编号必须打印在所有打印页面的顶部。我正在使用 php 来实现这一点。但这里我只是复制 html 版本。该脚本在 FF 和 IE 中运行良好，但在 chrome 中无法运行。在 FF 中，我可以看到发票编号出现在打印视图中所有页面的页眉部分。我已经删除了所有不必要的代码以获得清晰的代码。我需要在每个打印页面中查看“发票编号：A23000BN”。有什么方法可以在 chrome 浏览器中实现相同的效果吗？我的html脚本如下：
<html>
<head>
<style>
#header
text-align: right;
height: 20px;
position: fixed;
margin: 0px;
bottom: 0px;
</style>
</head>
<body>
<table >
<tr>
<td ></td>
</tr>
</table>
<div class="header"> Invoice Number : A23000BN </div>
</body>
</html>
【问题讨论】：
在您的样式代码中 #header 指向一个 ID 。将此更改为 .header 以将其指向您的标头类。 运行 html 时效果很好。请在 Chrome 中进行打印预览。标题不重复。我只能在第一页看到发票编号打印一次。 类似问题***.com/questions/1360869/… 我看到了那个解决方案。但是该解决方案仅限于如果您知道在许多记录之后您需要休息一下。但我的页面是动态的。我不知道什么时候需要休息。无论如何，谢谢你的时间。 【参考方案1】：由于TD元素较高，所以序列号显示在第二页底部：https://jsfiddle.net/m665svj6/
我也可以在打印预览中看到...
如果您希望它显示在页面顶部，请将 bottom: 0px; 更改为 top: 0px;，如下所示：https://jsfiddle.net/m665svj6/1/
【讨论】：
我只是给了 td 元素更多，因为我想在多个页面中显示结果。有多少页，我需要在所有打印页面的顶部显示发票编号。【参考方案2】：这样的？ https://jsfiddle.net/1xnnnp4b/2/
按 Ctrl+P 获取打印预览中的内容（在屏幕版本中不可见）
.header
display: none;
@media print
.header
display: block;
position: fixed;
<div class="header">
Invoice Number : A23000BN
</div>
<table >
<tr>
<td >sameple content
</td>
</tr>
</table>编辑：我认为应该这样做。您需要将更改复制到您的页面，然后尝试。它在 jsfiddle 中无法正常工作，因为父区域有 oveflow
【讨论】：
让我试着解释一下这个场景。我的发票报告通常有 2 到 3 页，其中的数据来自数据库。在打印中，我需要显示发票编号的所有页面。不只是在第一页或最后一页。如果您可以增加以上是关于如何在 Chrome 中的每个打印页面上打印部分网页（标题）的主要内容，如果未能解决你的问题，请参考以下文章