如果你使用div标签，在每一页上打印页眉和页脚是非常困难的任务。在我的项目中，我几乎搜索了整个网站，发现打印每一页的页眉和页脚，你必须使用表格和CSS规则，如果不使用表格和CSS，你不能在每一页上打印页眉。我为你提供的代码如下：

<style>
    @media screen{thead{display:none;}}
    @media print{thead{display:table-header-group; margin-bottom:2px;}}
    @page{margin-top:1cm;margin-left:1cm;margin-right:1cm;margin-bottom:1.5cm;}}
</style>

字符串
第一个CSS规则使表格的头部不会显示在屏幕上的用户和第二个规则定义，在打印期间，头部显示为table-header-group，因为这个规则将显示每一页上的标题，如果你省略这个标题不会打印在每一页上，第三个规则是为了保持页边距，从重叠的标题或页脚，你的html代码将如下所示：

<table>
    <thead>
        <tr>
            <th>  <---  Your header text would be placed here    --->  </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <--- Your printing text would be place here    ---> 
            </td>
        </tr>
    </tbody>
</table>

型
最后一件事，我已经尝试了IE，Safari，Firefox和Chrome上的代码，并想告诉你，在Chrome的标题只打印在第一页.我也报告了错误很多次，但Chrome是没有做任何事情对这个问题.

你可以使用iframe，但我不推荐它，没有人使用它。
如果你是动态创建报告的，你最好在创建的时候把标题添加到创建的页面上，毕竟这是最广泛使用的技术。
另一个选项可能是使用css content属性。

div#main:before {
    content: "<p>I appear before the div tag</p><hr />"
}

字符串

• 注意 *：如果指定了!DOCTYPE，则IE8仅支持the content property。

到今天为止，webkit.org上的错误仍然没有解决：https://bugs.webkit.org/show_bug.cgi?id=17205
我在使用一个将HTML转换为PDF的webkit引擎时也遇到了同样的问题。这对我很有效：
首先，让你的css适用于所有的媒体类型

<style type="text/css" media="all">

字符串
确保设置了head的显示属性：

thead { display: table-header-group;}

型
最后一个，解决表格中的行被标题重叠或行在分页时被切成两半的问题

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead tr th{ height: 50px;}

型

CSS

<style>
      .empty-header {
        height: 0px
      }

      .empty-footer {
        height: 0px
      }

      @media print {
        .empty-header {
          height: 100px
        }

        .empty-footer {
          height: 20px
        }
      }

      header {
        width: 100%;
        height: 50px;
      }

      footer {
        width: 100%;
        height: 20px;
      }

      @media print {

        header,
        footer {
          position: fixed;
          color: #777;
        }

        footer {
          bottom: 0;
        }
      }
</style>

字符串

HTML格式

<header>
      <h3>Header Example</h3>
      <li>This is an example of a header.</li>
    </header>
    <table class=paging>
      <thead class="empty-header"></thead>
      <tbody>
        <tr>
          <td>
            <ol>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              <li>This is the main content of the page.</li>
              </ol>
          </td>
        </tr>
      </tbody>
      <tfoot class="empty-footer"></tfoot>
    </table>
    <footer>(repeated footer)</footer>
    </body>

型