仅做个人项目记录 , 略微混乱 ,仅做参考
(另一种版本 设置页面打印固定条数 参考 https://www.cnblogs.com/tenie/p/4851772.html)
大致原理 ------模板化 -- 头尾中间数据加一起总高度小于A4纸高度, 打印前序列化一次, 获取每个列的高度加一起,数据过多自动换行高度自动变化, 打印分页 使用 <div style='page-break-after:always;'></div> 强制换行
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>XXXXXXXX</title>
<script src="../js/jquery-1.9.1.min.js"></script>
<style>
* {
margin: 0 auto;
padding: 0
}
.clear:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.table {
width: 90%;
margin: 0 auto
}
table {
font-size: 14px;
width: 95%;
border-collapse: collapse
}
thead td {
background: rgb(0, 170, 148);
color: #fff;
text-align: center;
}
table td {
border: 1px solid #dedede;
line-height: 26px;
padding: 3px;
}
.tool tr:first-child td {
border-top: none
}
.list tr:first-child td {
border-top: none
}
.allTable {
margin-top: 30px
}
</style>
</head>
<body>
<button id="serialization">打印</button>
<div class="box2">
<div>
<div style="font-weight:bold;font-size:25px;color:red;line-height:22px;text-align:center;">XXXXXXXXXXXXXXX</div>
<div class="title">
<table>
<tr>
<td style="width:16.6%">工作内容:</td>
<td class="czrw" style="width:16.6%" colspan="5"></td>
</tr>
<tr>
<td style="width:16.6%">* 类型:</td>
<td class="tylx" style="width:16.6%" colspan="2"></td>
<td style="width:16.6%">编号:</td>
<td class="bh" style="width:16.6%" colspan="2"></td>
</tr>
<tr>
<td style="width:16.6%">申请书号:</td>
<td class="jxpno" style="width:16.6%" colspan="5"></td>
</tr>
<tr>
<td style="width:16.6%">拟票人:</td>
<td class="nprname" style="width:16.6%"></td>
<td style="width:16.6%">拟票日期