本文展示了一个适用于IE浏览器的送货单分页打印效果实例，包括详细的HTML结构、内联样式及JavaScript代码，用于实现多页打印、页面设置等功能。
下面是我做的一个分页打印效果：，不过只适应在IE下使用。
<html><head><title>[打印时间：2013-3-14 17:20:58]</title>
<link href="/css/print.css" rel="stylesheet" type="text/css">
<!--media=print 这个属性可以在打印时有效-->
<style media="print">
.Noprint{display:none;}
.PageNext{page-break-after:always;}
</style>
<script language="javascript">
var hkey_root,hkey_path,hkey_key; hkey_root='HKEY_CURRENT_USER'; hkey_path='\\Software\\Microsoft\\Internet Explorer\\PageSetup\\';
function pagesetup_null_head() {
try{ var RegWsh = new ActiveXObject('WScript.Shell');
hkey_key = 'header'; RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, '');} catch (e) {showErr('页面设置');}}
function pagesetup_null_footer() {
try{
var RegWsh = new ActiveXObject('WScript.Shell');
hkey_key = 'footer';
RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, '');
} catch (e) {
showErr('页面设置');}
}
function pagesetup_default() {
try {
var RegWsh = new ActiveXObject('WScript.Shell');
hkey_key = 'header';
RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, '&w&b页码，&p/&P'); hkey_key = 'footer';
RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, '&u&b&d');
} catch (e) {showErr('页面设置');}}
function showErr(operation){alertMsg.info('对不起！您目前无法通过此按钮进行“'+operation+'”！\n\n请您直接使用浏览器自带的菜单进行“'+operation+'”；\n\n或者将IE浏览器开启ActiveX后再试试：\n\n开启ActiveX步骤：\nIE浏览器：工具->Internet选项->安全->“Internet”和“本地Intranet”->自定义级别：ActiveX控件和插件->对没有标记为安全的ActiveX控件进行初始化和脚本运行：设置为“启用”。(或者将ActiveX控件和插件->所有与ActiveX相关的参数都设置为“启用”。)\n\n以上设置确定后，再重新登录UTMS，即可进行“'+operation+'”。');}
function printView(){try{document.all.WebBrowser.ExecWB(7,1)}catch(e){showErr('打印预览');};}
function toPrint(){if (confirm('您确定打印了吗？')){window.print(); alertMsg.info('正在打印中，请您稍候……\n\n打印完成后请您按确定返回。');}} function pageSetup(){try{document.all.WebBrowser.ExecWB(8,1)}catch(e){showErr('页面设置');};}</script>
</head>
<body oncontextmenu="alertMsg.info("欢迎使用UTMS打印页面~");return false;">
<object classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" id="WebBrowser" width="87" height="21">
</object>
<div style="text-align:center">
<div id="batchPrintMatesReceipt">
<div>
<div>
<table width="100%" style="border-collapse:collapse;">
<thead>
<tr height="20px">
<td colspan="6" align="center" style="font-size:15pt">
<!-- <b>广州中邮普泰移动通信设备有限责任公司</b> -->
<b style="line-height: 22px;">中国移动通信集团终端有限公司广东分公司</b>
</td>
</tr>
</thead>
<tbody>
<tr height="20px">
<td colspan="5" width="55%">
<table width="100%">
<tbody><tr>
<td align="right" style="font-size:12pt;"> <b style="line-height: 18px;">送 货 单</b> </td>
</tr>
</tbody></table>
</td>
<td align="center" style="font-size:10pt">
<font style="line-height: 15px;">送货单号：TH-ZDJM-1300026</font>
</td>
</tr>
<tr height="20px">
<td colspan="6" width="100%">
<table width="100%">
<tbody><tr>
<td width="50%" style="font-size:10pt"><font style="line-height: 15px;">客户名称：终端公司广州省仓</font></td>
<td style="font-size:10pt"><font style="line-height: 15px;">收货地址：</font></td>
</tr>
</tbody></table>
</td>
</tr>
<tr height="20px">
<td colspan="6" width="100%">
<table width="100%">
<tbody><tr>
<td width="50%" style="font-size:10pt"><font style="line-height: 15px;">收货人：</font></td>
<td style="font-size:10pt"><font style="line-height: 15px;">联系电话： </font></td>
<td align="right" style="font-size:10pt"><font style="line-height: 15px;">日期：2013-03-14</font></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table width="100%" border="1" bordercolor="#000000" style="border-collapse:collapse;">
<thead>
<tr align="center" style="height: 20;">
<td style="line-height: 15px;">商品代码</td>
<td style="line-height: 15px;">品牌</td>
<td style="line-height: 15px;">机型</td>
<td style="line-height: 15px;">颜色</td>
<td style="line-height: 15px;">应发货数量</td>
<td style="line-height: 15px;">实收数量</td>
<td style="line-height: 15px;">单位</td>
<td style="line-height: 15px;" width="130px">备注</td>
</tr>
</thead>
<tbody>
<tr style="height: 20;" align="center">
<td style="line-height: 15px;">1000000988</td>
<td style="line-height: 15px;">联想</td>
<td style="line-height: 15px;">A288t</td>
<td style="line-height: 15px;">亚光黑</td>
<td style="line-height: 15px;">159</td>
<td style="line-height: 15px;">0</td>
<td style="line-height: 15px;">台</td>
<td style="line-height: 15px;"></td>
</tr>
<tr style="height: 20;" align="center">
<td style="line-height: 15px;">1000000985</td>
<td style="line-height: 15px;">华为</td>
<td style="line-height: 15px;">T9200</td>
<td style="line-height: 15px;">黑色</td>
<td style="line-height: 15px;">15</td>
<td style="line-height: 15px;">0</td>
<td style="line-height: 15px;">台</td>
<td style="line-height: 15px;"></td>
</tr>
<tr style="height: 20;" align="center">
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
</tr>
<tr style="height: 20;" align="center">
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
</tr>
<tr style="height: 20;" align="center">
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
</tr>
<tr style="height: 20;" align="center">
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
</tr>
<tr style="height: 20;" align="center">
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
</tr>
<tr style="height: 20;" align="center">
<td align="left" style="line-height: 15px;">合 计：</td>
<td colspan="3"></td>
<td style="line-height: 15px;">174</td>
<td style="line-height: 15px;">0</td>
<td style="line-height: 15px;">台</td>
<td width="60px"></td>
</tr>
<tr style="height: 20;" align="center">
<td colspan="8" align="left" style="line-height: 15px;">备 注：</td>
</tr>
</tbody>
</table>
<table width="100%">
<tbody><tr height="20px" style="font-size:10pt">
<td colspan="8" align="left"><font style="line-height: 15px;">声明：收货时请核对实际数额，收货人一经签名，即作为销售合同立即生效，解决纠纷方式，由供货方向当地法院</font></td>
</tr>
<tr height="20px">
<td colspan="8" align="left">
<table width="100%">
<tbody><tr style="font-size:10pt">
<!-- <td width="50%">发货单位：广州中邮普泰移动通信设备有限责任公司</td> -->
<td width="50%">
<font style="line-height: 15px;">发货单位：
广邮江门
</font>
</td>
<td width="50%">
<font style="line-height: 15px;">物流商：</font>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr height="20px" style="font-size:10pt">
<td><font style="line-height: 15px;">制单人：刘帆 </font></td>
<td><font style="line-height: 15px;">发货人：</font></td>
<td></td>
<td><font style="line-height: 15px;">送货员：</font></td>
<td></td>
<td><font style="line-height: 15px;">收货人签名、盖章：</font></td>
<td></td>
<td><font style="line-height: 15px;">收货时间：</font></td>
<td></td>
</tr>
</tbody></table>
</div>
</div>
<div class="PageNext"></div>
<div>
<div>
<table width="100%" style="border-collapse:collapse;">
<thead>
<tr height="20px">
<td colspan="6" align="center" style="font-size:15pt">
<!-- <b>广州中邮普泰移动通信设备有限责任公司</b> -->
<b style="line-height: 22px;">中国移动通信集团终端有限公司广东分公司</b>
</td>
</tr>
</thead>
<tbody>
<tr height="20px">
<td colspan="5" width="55%">
<table width="100%">
<tbody><tr>
<td align="right" style="font-size:12pt;"> <b style="line-height: 18px;">送 货 单</b> </td>
</tr>
</tbody></table>
</td>
<td align="center" style="font-size:10pt">
<font style="line-height: 15px;">送货单号：TH-ZDJM-1300026</font>
</td>
</tr>
<tr height="20px">
<td colspan="6" width="100%">
<table width="100%">
<tbody><tr>
<td width="50%" style="font-size:10pt"><font style="line-height: 15px;">客户名称：终端公司广州省仓</font></td>
<td style="font-size:10pt"><font style="line-height: 15px;">收货地址：</font></td>
</tr>
</tbody></table>
</td>
</tr>
<tr height="20px">
<td colspan="6" width="100%">
<table width="100%">
<tbody><tr>
<td width="50%" style="font-size:10pt"><font style="line-height: 15px;">收货人：</font></td>
<td style="font-size:10pt"><font style="line-height: 15px;">联系电话： </font></td>
<td align="right" style="font-size:10pt"><font style="line-height: 15px;">日期：2013-03-14</font></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table width="100%" border="1" bordercolor="#000000" style="border-collapse:collapse;">
<thead>
<tr align="center" style="height: 20;">
<td style="line-height: 15px;">商品代码</td>
<td style="line-height: 15px;">品牌</td>
<td style="line-height: 15px;">机型</td>
<td style="line-height: 15px;">颜色</td>
<td style="line-height: 15px;">应发货数量</td>
<td style="line-height: 15px;">实收数量</td>
<td style="line-height: 15px;">单位</td>
<td style="line-height: 15px;" width="130px">备注</td>
</tr>
</thead>
<tbody>
<tr style="height: 20;" align="center">
<td style="line-height: 15px;">1000000985</td>
<td style="line-height: 15px;">华为</td>
<td style="line-height: 15px;">T9200</td>
<td style="line-height: 15px;">白色</td>
<td style="line-height: 15px;">41</td>
<td style="line-height: 15px;">0</td>
<td style="line-height: 15px;">台</td>
<td style="line-height: 15px;"></td>
</tr>
<tr style="height: 20;" align="center">
<td style="line-height: 15px;">1000001011</td>
<td style="line-height: 15px;">酷派</td>
<td style="line-height: 15px;">8020</td>
<td style="line-height: 15px;">星耀黑</td>
<td style="line-height: 15px;">541</td>
<td style="line-height: 15px;">0</td>
<td style="line-height: 15px;">台</td>
<td style="line-height: 15px;"></td>
</tr>
<tr style="height: 20;" align="center">
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
</tr>
<tr style="height: 20;" align="center">
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
</tr>
<tr style="height: 20;" align="center">
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
</tr>
<tr style="height: 20;" align="center">
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
</tr>
<tr style="height: 20;" align="center">
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
</tr>
<tr style="height: 20;" align="center">
<td align="left" style="line-height: 15px;">合 计：</td>
<td colspan="3"></td>
<td style="line-height: 15px;">582</td>
<td style="line-height: 15px;">0</td>
<td style="line-height: 15px;">台</td>
<td width="60px"></td>
</tr>
<tr style="height: 20;" align="center">
<td colspan="8" align="left" style="line-height: 15px;">备 注：</td>
</tr>
</tbody>
</table>
<table width="100%">
<tbody><tr height="20px" style="font-size:10pt">
<td colspan="8" align="left"><font style="line-height: 15px;">声明：收货时请核对实际数额，收货人一经签名，即作为销售合同立即生效，解决纠纷方式，由供货方向当地法院</font></td>
</tr>
<tr height="20px">
<td colspan="8" align="left">
<table width="100%">
<tbody><tr style="font-size:10pt">
<!-- <td width="50%">发货单位：广州中邮普泰移动通信设备有限责任公司</td> -->
<td width="50%">
<font style="line-height: 15px;">发货单位：
广邮江门
</font>
</td>
<td width="50%">
<font style="line-height: 15px;">物流商：</font>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr height="20px" style="font-size:10pt">
<td><font style="line-height: 15px;">制单人：刘帆 </font></td>
<td><font style="line-height: 15px;">发货人：</font></td>
<td></td>
<td><font style="line-height: 15px;">送货员：</font></td>
<td></td>
<td><font style="line-height: 15px;">收货人签名、盖章：</font></td>
<td></td>
<td><font style="line-height: 15px;">收货时间：</font></td>
<td></td>
</tr>
</tbody></table>
</div>
</div>
<div class="PageNext"></div>
<div>
<div>
<table width="100%" style="border-collapse:collapse;">
<thead>
<tr height="20px">
<td colspan="6" align="center" style="font-size:15pt">
<!-- <b>广州中邮普泰移动通信设备有限责任公司</b> -->
<b style="line-height: 22px;">中国移动通信集团终端有限公司广东分公司</b>
</td>
</tr>
</thead>
<tbody>
<tr height="20px">
<td colspan="5" width="55%">
<table width="100%">
<tbody><tr>
<td align="right" style="font-size:12pt;"> <b style="line-height: 18px;">送 货 单</b> </td>
</tr>
</tbody></table>
</td>
<td align="center" style="font-size:10pt">
<font style="line-height: 15px;">送货单号：TH-ZDJM-1300026</font>
</td>
</tr>
<tr height="20px">
<td colspan="6" width="100%">
<table width="100%">
<tbody><tr>
<td width="50%" style="font-size:10pt"><font style="line-height: 15px;">客户名称：终端公司广州省仓</font></td>
<td style="font-size:10pt"><font style="line-height: 15px;">收货地址：</font></td>
</tr>
</tbody></table>
</td>
</tr>
<tr height="20px">
<td colspan="6" width="100%">
<table width="100%">
<tbody><tr>
<td width="50%" style="font-size:10pt"><font style="line-height: 15px;">收货人：</font></td>
<td style="font-size:10pt"><font style="line-height: 15px;">联系电话： </font></td>
<td align="right" style="font-size:10pt"><font style="line-height: 15px;">日期：2013-03-14</font></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table width="100%" border="1" bordercolor="#000000" style="border-collapse:collapse;">
<thead>
<tr align="center" style="height: 20;">
<td style="line-height: 15px;">商品代码</td>
<td style="line-height: 15px;">品牌</td>
<td style="line-height: 15px;">机型</td>
<td style="line-height: 15px;">颜色</td>
<td style="line-height: 15px;">应发货数量</td>
<td style="line-height: 15px;">实收数量</td>
<td style="line-height: 15px;">单位</td>
<td style="line-height: 15px;" width="130px">备注</td>
</tr>
</thead>
<tbody>
<tr style="height: 20;" align="center">
<td style="line-height: 15px;">1000001016</td>
<td style="line-height: 15px;">天迈</td>
<td style="line-height: 15px;">A18</td>
<td style="line-height: 15px;">睿智黑</td>
<td style="line-height: 15px;">165</td>
<td style="line-height: 15px;">0</td>
<td style="line-height: 15px;">台</td>
<td style="line-height: 15px;"></td>
</tr>
<tr style="height: 20;" align="center">
<td style="line-height: 15px;">1000001024</td>
<td style="line-height: 15px;">新邮通</td>
<td style="line-height: 15px;">N336+</td>
<td style="line-height: 15px;">白色</td>
<td style="line-height: 15px;">59</td>
<td style="line-height: 15px;">0</td>
<td style="line-height: 15px;">台</td>
<td style="line-height: 15px;"></td>
</tr>
<tr style="height: 20;" align="center">
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
</tr>
<tr style="height: 20;" align="center">
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
</tr>
<tr style="height: 20;" align="center">
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
</tr>
<tr style="height: 20;" align="center">
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
</tr>
<tr style="height: 20;" align="center">
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
<td style="line-height: 15px;"> </td>
</tr>
<tr style="height: 20;" align="center">
<td align="left" style="line-height: 15px;">合 计：</td>
<td colspan="3"></td>
<td style="line-height: 15px;">224</td>
<td style="line-height: 15px;">0</td>
<td style="line-height: 15px;">台</td>
<td width="60px"></td>
</tr>
<tr style="height: 20;" align="center">
<td colspan="8" align="left" style="line-height: 15px;">备 注：</td>
</tr>
</tbody>
</table>
<table width="100%">
<tbody><tr height="20px" style="font-size:10pt">
<td colspan="8" align="left"><font style="line-height: 15px;">声明：收货时请核对实际数额，收货人一经签名，即作为销售合同立即生效，解决纠纷方式，由供货方向当地法院</font></td>
</tr>
<tr height="20px">
<td colspan="8" align="left">
<table width="100%">
<tbody><tr style="font-size:10pt">
<!-- <td width="50%">发货单位：广州中邮普泰移动通信设备有限责任公司</td> -->
<td width="50%">
<font style="line-height: 15px;">发货单位：
广邮江门
</font>
</td>
<td width="50%">
<font style="line-height: 15px;">物流商：</font>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr height="20px" style="font-size:10pt">
<td><font style="line-height: 15px;">制单人：刘帆 </font></td>
<td><font style="line-height: 15px;">发货人：</font></td>
<td></td>
<td><font style="line-height: 15px;">送货员：</font></td>
<td></td>
<td><font style="line-height: 15px;">收货人签名、盖章：</font></td>
<td></td>
<td><font style="line-height: 15px;">收货时间：</font></td>
<td></td>
</tr>
</tbody></table>
</div>
</div>
</div><br><span class="Noprint"><input onclick="printView()" type="button" value="打印预览" class="button" onmouseover="this.className='button_over'" onmouseout="this.className='button'"> <input onclick="toPrint()" type="button" value="直接打印" class="button" onmouseover="this.className='button_over'" onmouseout="this.className='button'"><input onclick="pageSetup()" type="button" value="页面设置" class="button" onmouseover="this.className='button_over'" onmouseout="this.className='button'"> <input onclick="javascript:window.close()" type="button" value="关闭窗口" class="button" onmouseover="this.className='button_over'" onmouseout="this.className='button'"><input name="pagesetup" onclick="pagesetup_null_head()" type="radio">清除页眉<input name="pagesetup" onclick="pagesetup_null_footer()" type="radio">清除页脚<input name="pagesetup" onclick="pagesetup_default()" type="radio">恢复页眉页脚</span></div></body></html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
