分页打印
场景描述
批量打印单据，一个单据占一页。
实现思路
使用打印组件，在打印模板中添加分页代码，实现分页
实现步骤
最简单的分页代码
<html> <head> <meta charset="UTF-8"> <title>分页打印</title> <!--media=print 这个属性可以在打印时有效--> <style media="print"> .PageNext{ page-break-after: always; } </style> </head> <body> <div>第一页</div> <!--分页--> <div class="PageNext"></div> <div>第二页</div> </body> </html>一个主表打印一页的案例
<html>
<head>
<meta charset="UTF-8">
<title>分页打印</title>
<!--media=print 这个属性可以在打印时有效-->
<style media="print">
.PageNext{
page-break-after: always;
}
</style>
<style type="text/css">
.head{
}
.footer {
}
.table {
border: 1px solid #dddddd;
}
.print-item{
display: table-row;
page-break-inside: avoid;
}
.print-item > .print-item-label,
.print-item > .print-item-value{
border: 1px solid #dddddd;
padding: 8px;
display: table-cell;
}
.print-item > .print-item-label{
width: 30%;
vertical-align: middle;
text-align: center;
}
.table ,
.child-table > .print-item-value{
padding: 0;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
display: table;
}
.child-table > .print-item-value{
margin: -1px;
}
.printer,.print-date{
padding-left: 60%;
}
.Image > .print-item-value > img{
max-width: 100%;
height: auto;
}
</style>
</head>
<body style="margin: 28px;">
<div class="head">
<h1 class="title">分页打印</h1>
</div>
<div class="table">
[[#each data]]
<div class='print-item String'>
<div class='print-item-label'>单行文本</div>
<div class='print-item-value'>[[[_deft_danxingwb]]]</div>
</div>
[[#if dbmdayin_1_deft_zb]]
<div class='print-item child-table'>
<div class='print-item-label'>子表</div>
<div class='print-item-value'>
[[#each dbmdayin_1_deft_zb]]
<div class='print-item Date'>
<div class='print-item-label'>日期</div>
<div class='print-item-value'>[[[_deft_riji]]]</div>
</div>
[[/each]]
</div>
</div>
[[/if]]
<!--分页-->
<div class="PageNext"></div>
[[/each]]
</div>
<div class="footer">
<h4 class="printer">打印人：[[context.printer]]</h4>
<h4 class="print-date">打印时间：[[context.printDate]]</h4>
</div>
</body>
</html>
因文档生成异常，代码中{} 使用[]代替，实际使用以{}为准