web打印时控制页边距
打印需求：使用js原生的print.js打印组件打印表格，或者其他的html内容，需要打印在A4纸上
遇到的问题：内容较多的时候，分页时候内容距离页面的顶部间距很小，打印的时候导致一部分内容丢失。现在想要可以自己控制分页的页边距，表格要实现自动换页和自动伸缩。
解决办法：使用hiprint第三方插件，不仅实现控制页边距，还可以添加页码，页眉等。实现表格自动伸缩等。参考地址：http://www.hinnn.com/docs/panel
使用的时候需要引入三个库：
<script src="static/js/print/JsBarcode.all.min.js"></script>
<script src="static/js/print/jquery.hiwprint.js"></script>
<script src="static/js/print/hiprint.bundle.js"></script>
DEMO代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="css/hiprint.css" rel="stylesheet" />
<link href="css/print-lock.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
</head>
<body>
<a id="A4_directPrint" class="btn hiprint-toolbar-item " style="color: #fff;
background-color: #d9534f;
border-color: #d43f3a;">打印</a>
<button onclick="ss()">打印</button>
<div id="testTable">
<div id="par">
<h2 class="title-h print-table">电梯{{maintenceDetail.type}}保养项目执行单</h2>
++++++++++++++
<p class="customer print-table">客户名称：{{maintenceDetail.consumerName}}</p>
<div class="flex print-table customer">
<div class="flex1">
电梯编号：{{maintenceDetail.uniqueCode}}
</div>
<div class="float-rt">
保养日期：{{maintenceDetail.maintainDate}}
</div>
</div>
</div>
<div class="qianming print-table">
<p class="find-problem">
维保中发现的问题及建议：{{maintenceDetail.question}}
</p>
<p class="maint-resault">
维保结论：{{maintenceDetail.conclusion}}
</p>
<div class="name-pic print-table special-name-pic">
<div class="right-name float-rt">
<div class="float-lt">
维保员一：
<img :src="maintenceDetail.maintainerSign[0]" alt="" class="lo-pic">
</div>
<div class="float-lt">
维保员二：
<img :src="maintenceDetail.maintainerSign[1]" alt="" class="lo-pic">
</div>
<div class="time-main float-rt">
签字日期：{{maintenceDetail.maintainerDate}}
</div>
</div>
</div>
</div>
<table class="my_show" style="width:100%;">
<tr><td rowspan="3">1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
<tr><td>11</td></tr>
<tr><td>12</td></tr>
<tr><td>13</td></tr>
<tr><td>14</td></tr>
<tr><td>15</td></tr>
<tr><td>16</td></tr>
<tr><td>17</td></tr>
<tr><td>18</td></tr>
<tr><td>19</td></tr>
<tr><td>20</td></tr>
<tr><td>21</td></tr>
<tr><td>22</td></tr>
<tr><td>23</td></tr>
<tr><td>24</td></tr>
<tr><td>25</td></tr>
<tr><td>26</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td>3</td></tr>
<tr><td>1</td></tr>
<tr><td>1</td></tr>
<tr><td>1</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
</table>
<div class="qianming print-table option-table main-detail-last-name">
<p class="find-problem opinion">
使用单位评价/意见：{{maintenceDetail.opinion}}
</p>
<div class="name-pic print-table">
<div class="float-rt right-name UU">
电梯安全管理员确认：
<img :src="maintenceDetail.propertySign" alt="" class="lo-pic">
</div>
<div class="float-rt time-main-detail">
日期：{{maintenceDetail.propertyDate}}
</div>
</div>
</div>
</div>
<script src="plugins/JsBarcode.all.min.js"></script>
<script src="hiprint.bundle.js"></script>
<script src="plugins/jquery.hiwprint.js"></script>
<script>
hiprint.init();
<!-- 创建打印模板对象-->
var hiprintTemplate = new hiprint.PrintTemplate();
<!-- 模板对象添加打印面板 paperHeader：页眉线 paperFooter：页尾线-->
var panel = hiprintTemplate.addPrintPanel({
paperFooter: 0,
paperHeader: 20 ,paperType:"A4",paperNumberLeft:10,
paperNumberTop:20,rotate:false});
panel.addPrintHtml({ options: { width: 600, height: 120, top: 30, left: 20, content:$("#par").html() } });
panel.addPrintHtml({ options: { width: 600, height: 80, top: 150, left: 20, content:$(".qianming").html() } });
panel.addPrintTable({ options: { top: 235, left: 20, height:10,content: $('#testTable').html() } });
$('#A4_directPrint').click(function () {
hiprintTemplate.print({});
});
</script>
</body>
</html>
在使用的过程中遇到的问题总结：
1、paperFooyer的值设置为0的时候，依旧出现之前的问题，在分页过渡位置处依旧会靠边，A4纸的时候大概设置810，具体的根据自己需要的距离底部距离来定。
2、表格中单元格的内容不一样的时候会导致表格过早的换页，第一页没满的时候就开始换页了。
当时把表格的所有行设置成固定的等高之后就不会随意换页了，直到页面底部的时候才会换页。但是这样会比较浪费纸，有些单元格内容过多，可能会有三行，大多数只有一行，后来发现自己单独设置了@print{}样式，打印预览的时候有些样式单独设置导致的，把@print{}中的样式全部干掉之后就好了。
3、使用addPrintTable方法直接打印table,发现打印不了，需要放到一个div之中才能打印。
浙公网安备 33010602011771号