Html 打印模板（带页眉页脚）

<!DOCTYPE html>
<html>

<head>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        
.page-header, .page-header-space {
  height: 80px;
}

.page-footer, .page-footer-space {
  height: auto;

}

.page-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 1px solid black; /* for demo */
  background: yellow; /* for demo */
}

.page-header {
  position: fixed;
  top: 0mm;
  width: 100%;
/*  border-bottom: 1px solid black;  for demo */
  background: yellow; /* for demo */
}

.page {
  page-break-after: always;
}

@page {
/*  margin: 20mm*/
    margin-top: 0.25in;
}

@media print {
   thead {display: table-header-group;} 
   tfoot {display: table-footer-group;}
   body {margin: 0;}
}
</style>
</head>

<body>

  <div class="page-header" style="text-align: center">
    I'm The Header
  </div>

<!--
  <div class="page-footer">
    I'm The Footer
  </div>
-->

  <table>

    <thead>
      <tr>
        <td>
          <div class="page-header-space"></div>
        </td>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>
            <!-- 内容一定要在 td 内 -->
            <!-- 内容区 -->
            
            <table class="table-bordered w-100 d-print-table">
                    <thead>
                      <tr><td>Header</td><td>Header</td><td>Header</td><td>Header</td><td>Header</td></tr>
                    </thead>
                
                    <tbody>
                        <tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
                        <tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
                        <tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
                        <tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
                        <tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
                        <tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
                        <tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
                        <tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
                        <tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
                </tbody>
            </table>
          
          <!--*** CONTENT GOES HERE ***-->
          <div class="page">PAGE 1</div>
          <div class="page">PAGE 2</div>
          <div class="page" style="line-height: 3;">
            PAGE 3 - Long Content
            <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus
            mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor
            pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere
            suscipit venenatis. Donec rhoncus sceler
          </div>

        <!-- ./ end 内容区 -->

        </td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td>
          <div class="page-footer-space"></div>
        </td>
      </tr>
    </tfoot>

  </table>

</body>

</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容