今天应客户的要求要修改网页的打印功能，浏览器本身自带有打印的功能，但是它打印出的是整个网页的内容，而且在分页打印表格的时候表格的拆分很难看。所以就百度找这个问题的解决办法，在此记录一下，加深记忆，同时也希望能帮到遇到同样问题的朋友。
废话不多说，来看具体步骤：
1、设置不打印页面中的按钮：
在标签中加上以下代码：
<style>@media print {INPUT {display: none;}</style>
2、设置打印的js代码：
<script language="javascript">function preview(oper){if (oper < 10){bdhtml=window.document.body.innerHTML;//获取当前页的html代码sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取htmlprnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取htmlwindow.document.body.innerHTML=prnhtml;window.print();window.document.body.innerHTML=bdhtml;} else {window.print();}}</script>
3、在页面中添加一个按钮，调用第二步的打印功能：
<button type="button" onclick=preview(1)><i class="fa fa-print"></i> 打印</button>
4、设置打印区域：
一般是打印某个div或某个table，只需要在div或table的标签起始位置加上标记和结束位置加上标记即可：
<!--startprint1--><div class="layui-row" style=''>。。。。。</div><!--endprint1-->
5、遇到表格自动换页：
在表格中加上属性page-break-after:auto即可
<table class="gridtable" style='width:100%;page-break-after:auto'>。。。</table>
6、每页的表格都加表头：
在表头处加上属性"display: table-header-group; "即可
<thead style="display: table-header-group; "><tr><td colspan='4' '>表头</td></tr></thead>
