window.print()，打印，打印有相同的的顶部栏和底部栏

需求：新增适配的针式打印的功能，多页打印的要有，一致的顶部和底部。 正在做的项目是已经有了A4打印的页面，需要新增针对针式打印机的打印页面。

实际上，不应该增加新页面，应该在老页面上进行修改样式，增加打印样式表，修改样式等操作。但是，由于原来的页面结很乱，结构不够清晰，不方便做表头表尾功能。

而且，应该一套代码可以适配各种打印纸张，必须想好怎么设计页面，才可以实现这一目标。

在编写过程中遇到诸多问题：如何确定纸张高度，如何避免table表格打印断裂，table与fixed定位元素重叠等等...

只在打印时生效的样式，叫做：打印样式表。这个样式表只作用于实际打印出来的页面。即调用window.print()方法后，windows系统弹出的打印预览窗口。预览的即为实际打印的。

https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/ CSS控制print打印样式-阿里云开发者社区

可以参考这两个链接。

<style type="text/css" media="print">
  @media print {
    @page {
      margin: 0.8cm;
    }
    #divMenu {
      display: none;
    }
    #divContract{
      margin: 0px auto;
    }
    body {
      margin: 0cm;
    }
  }
</style>

在做这个需求时，走了不少弯路。（弯路我也记不清了，直接说结论）

最后发现是可以，是应该，是必须利用这几个标签或者属性的特性：

table标签的thead和tfoot会在每一页的上下都出现；

fixed定位会出现在打印出来的每一页上。

我们制作表头、表尾时，可以用利用这写特性：（这里是重点）

thead，tfoot，的内容就编写头尾内容

但是如果表尾这样处理的话，在最后一页的表尾，可能不是在纸张底部。所以对于表尾来说，不能这样处理。 应该给div设置fixed定位，利用fixed特性，实现每页有相同的底部栏。

这样可以避免fixed定位的内容与tfoot的内容或者表格的内容重叠。 所以我们可以给让tfoot为空，撑起来下部的内容。如下

  <style type="text/css" media="print">
    @media print {
      .div_bottom {
        position: fixed;
        bottom: 20px;
        margin: 0 auto;
      }
    }
  </style>
<div id="divContract">
    <div class="content">
      <div style="margin-bottom:20px;">
        <table>
          <thead>
          <tr>
            <td>
              <div class="top-content" style="width: 950px;height: 106px;position: absolute;">
                <h1 style="text-align: center;">标题头</h1>
              </div>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          </thead>
​
          <tbody>
          <tr>
            <td>数量号</td>
            <td>数量</td>
            <td>数量</td>
            <td>数量</td>
            <td>数量</td>
            <td>数量</td>
            <td>数量</td>
            <td>数量</td>
          </tr>
          </tbody>
          
          <tfoot>
          <tr>
            <td colspan="8" style="height: 50px;"></td>
          </tr>
          </tfoot>
        </table>
      </div>
      <div class="div_bottom">
        <div>表底</div>
      </div>
    </div>
  </div>

同理，表格的标题头，即它的相同的顶部也是可以表尾的方法来写。

到这里就是可以实现：打印的单子有相同的顶部和底部了。但是由于我们写的顶、底部是表格的一部分，还需要单独处理他们的上下左右边框。还有避免表格断裂的问题，网上还有别的教程，大家看看吧

打印的结束了，欢迎交流。