如何在 Chrome 中的每个打印页面上打印部分网页（标题）答案

【问题标题】：How to print part of a webpage (header) on each printed page in Chrome如何在 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 width="100%">
   <tr>
      <td height="1200"></td>
   </tr>
</table>
<div class="header"> Invoice Number : A23000BN </div>
</body>
</html>

【问题讨论】：

在您的样式代码中 #header 指向一个 ID 。将此更改为 .header 以将其指向您的标头类。
运行 html 时效果很好。请在 Chrome 中进行打印预览。标题不重复。我只能在第一页看到发票编号打印一次。
类似问题stackoverflow.com/questions/1360869/…
我看到了那个解决方案。但是该解决方案仅限于如果您知道在许多记录之后您需要休息一下。但我的页面是动态的。我不知道什么时候需要休息。无论如何，谢谢你的时间。

标签： javascript jquery html css

【解决方案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 width="100%">
  <tr>
    <td height="1500">sameple content
    </td>
  </tr>
</table>

编辑：我认为应该这样做。您需要将更改复制到您的页面，然后尝试。它在 jsfiddle 中无法正常工作，因为父区域有 oveflow

【讨论】：

让我试着解释一下这个场景。我的发票报告通常有 2 到 3 页，其中的数据来自数据库。在打印中，我需要显示发票编号的所有页面。不只是在第一页或最后一页。如果您可以增加您可以看到 2 页，但在第二页中您看不到 Invoice Number。希望你明白我的意思吗？
是的，我复制到我的页面并检查了它...我检查了 Chrome，它无法正常工作。你能检查一下chrome吗？我真的坚持这一点。