1，一个打印页面批量预览打印内容。
2，打印换页代码如下：
<div style="page-break-after: always; page-break-inside: avoid;"></div>
整体页面DEMO如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="/static/plugs/layui/css/layui.css" type="text/css" rel="stylesheet"/>
<style>
table {
width: 98%;
border: 1px solid #000 !important;
}
th, td {
text-align: center;
border: 1px solid #000 !important;
padding: 5px 8px !important;
}
.title{
text-align: center;
margin: 30px 0 ;
font-size: 36px;
}
</style>
</head>
<body>
<!--<div style="text-align:center; font-weight: bold; color:red;margin-top: 10px;font-size: 60px">
<img style="height: 80px" src="{$image}">{$user.shop_name}
</div>-->
{foreach $master_list as $k => $master_info }
<p>销售单</p>
<button style="position: absolute ;right: 10px;top:10px;" class="layui-btn printer">打印</button>
<div style="display:flex;justify-content:space-around;;width: 95%;font-size: 18px;font-weight: bold;margin-top: 20px;margin-left: 33px;">
<div>销售单号：{$master_info.info.order_num}</div>
<div>销售件数：{$master_info.info.total_count}</div>
<div>销售时间：{$master_info.info.export_time|date="Y-m-d"}</div>
</div>
<div style="width: 98%;">
<table style="margin:20px 30px;">
<thead>
<tr>
{eq name="$setting.name" value="1"}
<th class='text-center nowrap'>商品名称</th>
{/eq}
{eq name="$setting.count" value="1"}
<th class='text-center nowrap'>销售数量</th>
{/eq}
<th class='text-center nowrap'>商品单位</th>
{eq name="$setting.price" value="1"}
<th class='text-center nowrap'>商品单价</th>
{/eq}
{eq name="$setting.total_price" value="1"}
<th class='text-center nowrap'>商品总价</th>
{/eq}
{eq name="$setting.warehouse" value="1"}
<th class='text-center nowrap'>仓库</th>
{/eq}
{eq name="$setting.apply" value="1"}
<th class='text-center nowrap'>客户</th>
{/eq}
</tr>
</thead>
<tbody>
{foreach $master_info.list as $k => $v }
<tr>
{eq name="$setting.name" value="1"}
<td class='text-center nowrap'>{$v.name}</td>
{/eq}
{eq name="$setting.count" value="1"}
<td class='text-center nowrap'>{$v.count}</td>
{/eq}
<td class='text-center nowrap'>{$v.unit_name}</td>
{eq name="$setting.price" value="1"}
<td class='text-center nowrap'>{$v.price}</td>
{/eq}
{eq name="$setting.total_price" value="1"}
<td class='text-center nowrap'>{$v.total_price}</td>
{/eq}
{eq name="$setting.warehouse" value="1"}
<td class='text-center nowrap'>{$v.warehouse}</td>
{/eq}
{eq name="$setting.apply" value="1"}
<td class='text-center nowrap'>{$v.customer}</td>
{/eq}
</tr>
{/foreach}
</tbody>
</table>
{eq name="$setting.addr" value="1"}
<div style="margin-left:30px; ">客户信息：{$master_info.info.addr}</div>
{/eq}
<div style="margin-left:30px; ">合计金额：{$master_info.info.total_money}</div>
</div>
<!--<div style="page-break-after: always; page-break-inside: avoid;">-->
<!--</div>-->
{/foreach}
</body>
</html>
<script src="/static/plugs/jquery/jquery.min.js"></script>
<script>
$('.printer').click(function () {
$(this).hide();
window.print();
$(this).show();
});
</script>
以上就是“网页如何实现批量打印单据”的详细内容，更多请关注木子天禾科技其它相关文章！
