教你如何用JS操作打印机进行打印（这个是批量打印）

前言： 看到本文的你，一定会是看过各种博客说如何进行“批量打印”，也有很多说了一些“指定区域打印”的，各种博客都不能满足你在开发中的定制开发？那本文就带你简单、通俗易懂地进行开发打印功能。

一、先创建最原始、最简单的html、css、js、img四个文件夹。

1、html: 按平常的创建html无异
2、css: 最重点的是，想要打印上下有空隙。可以这样设置：

 <style media="print">
        @page {
            size: auto;  /* auto is the initial value */
            margin: 10mm 0; /* this affects the margin in the printer settings */
        }
    </style>

3、我这里是用vue和axios来操作，因为是为了简单操作，就没有用到npm的方式操作了，我就直接引入了。

二、然后我们就修改我们最关心的JS代码。

1、第一步，我们应该是要通过异步请求接口从后端获取数据，然后渲染到页面上。

2、第二步，就是等页面渲染完成，自动弹出打印窗口。

三、然后，需求需要的是，每页都要有表头，然后表格正常显示。

设置每页共同的表头：
只需要添加thead，样式设置成:

<thead style="display: table-header-group;" border="0">
     <tr>
         <td>
             //需要放的共同表头
         </td>
     </tr>
 </thead>  

于是我出现了以下问题：

1、表格连着出现分页有隐藏了部分信息
2、每页都有表头发现表格的线异常。

我是怎么解决的：

1、我发现一开始，表格的样式css写的有问题，就是border写的有问题。
本来的table的border写法是这样的（有分页打印表格就会有问题），正常的表格border写法：

table{
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
}
table th{
	border-left: 1px solid #000;
	border-top: 1px solid #000;
}
table td{
	border-left: 1px solid #000;
	border-top: 1px solid #000;
}

后面改成：
1、在css

table{
	borer: 0;
}
table th{
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
}
table td{
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
}

2、在html,在最后一列添加border

四、最后，你会看到，分页打印的表格border线，不会连在打印，按打印完成。