Question

我正在处理发票打印脚本。发票号码必须打印在所有打印页面的顶部。我用php来实现这个目的。但这里我只是复制html版本。这个脚本在FF和IE中工作正常，但不能在chrome中工作。在FF中，我可以看到发票编号出现在打印视图中所有页面的标题部分中。我删除了所有不必要的代码以获得清晰的代码。我需要看到＆＃34;发票编号：A23000BN＆＃34;在每个打印页面中。有没有办法在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>

Answer 1

这样的东西？ 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

Answer 2

由于TD元素较高，序列号显示在第二页的底部：https://jsfiddle.net/m665svj6/

我也可以在打印预览中看到它......

如果您希望它显示在页面顶部，请将bottom: 0px;改为top: 0px;，如下所示：https://jsfiddle.net/m665svj6/1/

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

2 个答案: