window.print 自定义页眉页脚

2023-11-28

字数统计: 522字 | 阅读时长≈ 3分

<style>
  .header,
  .header-space,
  .footer,
  .footer-space {
    height: 100px;
  }
  .header {
    position: fixed;
    top: 0;
  }
  .footer {
    position: fixed;
    bottom: 0;
  }
</style>

<table>
  <thead>
    <tr>
      <td>
        <div class="header-space">&nbsp;</div>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="content">...</div>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>
        <div class="footer-space">&nbsp;</div>
      </td>
    </tr>
  </tfoot>
</table>
<div class="header">...</div>
<div class="footer">...</div>

方法一：position fixed

<style>
  .header {
    position: fixed;
    top: 0;
  }
  .footer {
    position: fixed;
    bottom: 0;
  }
</style>

<div class="header">...</div>
<div class="content">...</div>
<div class="footer">...</div>
// CSS

这个方法超过一页后，页眉页脚会与内容重叠

方法二：table

<table>
  <thead>
    <tr><td>
      <div class="header">...</div>
    </td></tr>
  </thead>
  <tbody>
    <tr><td>
      <div class="content">...</div>
    </td></tr>
  </tbody>
  <tfoot>
    <tr><td>
      <div class="footer">...</div>
    </td></tr>
  </tfoot>
</table>

利用表格 table，打印会自动把 thead,tfoot 设置为页眉页脚，不过这个方法页脚会跟在内容后面，不会在页面底部

总结：两种方法结合，可以很好的实现

<style>
  .header,
  .header-space,
  .footer,
  .footer-space {
    height: 100px;
  }
  .header {
    position: fixed;
    top: 0;
  }
  .footer {
    position: fixed;
    bottom: 0;
  }
</style>

<table>
  <thead>
    <tr>
      <td>
        <div class="header-space">&nbsp;</div>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="content">...</div>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>
        <div class="footer-space">&nbsp;</div>
      </td>
    </tr>
  </tfoot>
</table>
<div class="header">...</div>
<div class="footer">...</div>

参考资料

本文作者： luckyship
本文链接： https://luckyship.github.io/2023/11/28/2023-11-28-window-print/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！