1，一個(gè)打印頁面批量預(yù)覽打印內(nèi)容。
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>銷售單號(hào)：{$master_info.info.order_num}</div>
<div>銷售件數(shù)：{$master_info.info.total_count}</div>
<div>銷售時(shí)間：{$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'>銷售數(shù)量</th>
{/eq}
<th class='text-center nowrap'>商品單位</th>
{eq name="$setting.price" value="1"}
<th class='text-center nowrap'>商品單價(jià)</th>
{/eq}
{eq name="$setting.total_price" value="1"}
<th class='text-center nowrap'>商品總價(jià)</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; ">合計(jì)金額：{$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>
以上就是“網(wǎng)頁如何實(shí)現(xiàn)批量打印單據(jù)”的詳細(xì)內(nèi)容，更多請關(guān)注木子天禾科技其它相關(guān)文章！
