如何制作页眉和页脚而不重复打印N页?

时间:2016-08-25 16:57:15

标签: javascript jquery css html5 printing

我很难在每个打印页面上重复页眉和页脚。没有问题必然是一张桌子,大多数人都喜欢,有人知道该怎么做? 我不知道它会有多少页,可以是n页。

enter image description here

尝试:jsfiddle.net/7ZGVv/111

2 个答案:

答案 0 :(得分:2)

好吧,因为似乎没有人认为它是重复的,我会在这里发布代码来证明它。请参阅此处的工作示例http://a-b-smith.com/

HTML

<h1>test 1</h1>
<h1>test 2</h1>
<h1>test 3</h1>
<h1>test 4</h1>
<h1>test 5</h1>
<h1>test 6</h1>
<div class="divFooter">
<h1>Footer</h1>
</div>
<div class="divHeader">
<h1>Header</h1>
</div>

CSS 注意我在每个<h1>之间添加了分页符以模拟多个页面

@media print {
  h1 {
    page-break-after: always;
  }
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
  div.divHeader {
    position: fixed;
    top: 0;
  }
  body > h1 {margin-top: 100px;}
}

@media screen {
  div.divFooter, div.divHeader {
    display: none;
  }
}

答案 1 :(得分:0)

HTML和CSS不支持在打印中打印页眉和页脚。 您可以使用以下方法进行模拟:

  • 表格
  • 固定位置块

此解决方案在每个浏览器中都有错误和警告。

请参阅:How to use HTML to print header and footer on every printed page of a document?