电子面单打印，因为系统版本原因，没有使用丰桥的sdk，而是通过打印控件LODOP打印，关键的是怎么生成相关数据，以及排版，因为有了德邦接口的经验，直接拿来就用，我们使用的是100x150mm规格的，以下是超完整的打印页面，没有更多的整合，基本是个人都能看懂，只需要把【】里面的内容换成相关的数据即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打印顺丰物流订单</title>
<script src='CLodopfuncs.js'></script>
<script src='jquery.js'></script>
<script type="text/javascript">
//单号格式
function replaceStr(str) {
return str.replace(/(.{3})/g,'$1 ');
}
//生成条码格式，13位的加上“SF”
function generSplitMailNo(bc) {
if(bc.length >= 13)
return "SF " + replaceStr(bc);
else
return replaceStr(bc);
}
var qrcode = "MMM={'k1':'xxx','k2':'xxxx','k3':'xxx','k4':'xxx','k5':'111111111111','k6':'','k7':'xxx'}"; //母单号二维码数据
var parentNo = "111111111111"; //母单号
//替换二维码里面的单号
function generQRCode(_mailNo) {
return qrcode.replace(parentNo, _mailNo);
}
var mailNo = "111111111111,111111111112,111111111113,111111111114,111111111115";
var mailNos = mailNo.split(",");
//新建lodop打印页面，为了打印更快
function createOnePage(index) {
LODOP.NewPage();
//设置打印机
LODOP.SET_PRINTER_INDEXA(document.getElementById("Select01").value);
LODOP.SET_PRINT_PAGESIZE(0,"100mm","150mm","CreateCustomPage");
LODOP.SET_SHOW_MODE("BKIMG_WIDTH","100mm");
LODOP.SET_SHOW_MODE("BKIMG_HEIGHT","150mm");
$('#mail_no_remark').html(mailNos[index-1]);
LODOP.ADD_PRINT_TABLE("2mm","3mm","96mm","147mm", $("div#expressPrintArea").html());
//运单条码
LODOP.ADD_PRINT_BARCODE("13mm","10mm","54mm","13mm","128Auto", mailNos[index-1].length>=13? ("SF" + mailNos[index-1]) : mailNos[index-1]);
LODOP.SET_PRINT_STYLEA(0,"ShowBarText",0);
LODOP.ADD_PRINT_TEXT("26mm","4mm","20mm","20mm", index + "/5");
LODOP.SET_PRINT_STYLEA(0,"FontSize",10);
if(index != 1) {
LODOP.ADD_PRINT_TEXT("26mm","16mm","50mm","20mm", "子单号:" + generSplitMailNo(mailNos[index-1]));
LODOP.ADD_PRINT_TEXT("29mm","16mm","50mm","20mm", "母单号:" + generSplitMailNo("111111111111"));
} else
LODOP.ADD_PRINT_TEXT("26mm","16mm","50mm","20mm", "母单号:" + generSplitMailNo("111111111111"));
//二维码
LODOP.ADD_PRINT_BARCODE("65mm","38mm","26mm","26mm","QRCode", generQRCode(mailNos[index-1]));
}
function print() {
alert('准备打印，请勿关闭浏览器。');
var size = 5; //总件数
var begin = 1;
var end = 5; //总件数
//选择打印
if($('input[name="printAmount"]:checked').val() == 1) {
begin = $('#begin').val()*1;
if(begin > size) {
begin = size;
$('#begin').val(begin);
}
end = $('#end').val()*1;
if(end > size)
end = size;
size = end - begin + 1;
}
var pageSize = 10;
var page = parseInt((size-1)/pageSize) + 1;
var _index = 1;
for(i = 1; i<=page; i++) {
LODOP.PRINT_INIT("打印电子面单");
if(i==page && size%pageSize !=0) {
for(k=0; k < size % pageSize; k++) {
_index++;
createOnePage(begin + _index -2);
}
} else {
for(j=0; j< pageSize; j++) {
_index++;
createOnePage(begin + _index -2);
}
}
LODOP.SET_PRINT_MODE("CUSTOM_TASK_NAME","打印电子面单" + i);
LODOP.PRINT();
}
}
function demoCreatePrinterList(){
CLODOP.Create_Printer_List(document.getElementById('Select01'));
}
$(function() {
LODOP=getCLodop();
LODOP.SET_LICENSES ("", "", "","");
//var pcount = LODOP.GET_PRINTER_COUNT();
//显示打印机
/*for(i=0; i < pcount; i++) {
var pname = LODOP.GET_PRINTER_NAME(i);
$('<p><label><input type="radio" name="printerName" lay-verify="required" value="'+ pname+'">'+ pname +'</label><p>').insertBefore('#printer_box');
}*/
demoCreatePrinterList();
});
</script>
<style>
.layui-input-block {width: 80%; float:left;}
.layui-form-label {width: 20%; float:left;}
.layui-form-item {width:100%; float:left;padding-top:10px;}
.layui-form-item p {line-height:20px}
</style>
</head>
<body>
<div style="width:90%; margin-left:20px; line-height:30px;">
<div class="layui-form-item">
<label class="layui-form-label" style="text-align:right">打印：</label>
<div class="layui-input-block">
<label><input type="radio" name="printAmount" value="0" checked>打印全部</label>
<p><label><input type="radio" name="printAmount" value="1" >从</label><input type="text" id="begin" value="1" style="width:30px;text-align:center"> 到 <input type="text" id="end" value="5" style="width:30px;text-align:center"></p>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" style="text-align:right">选择打印机：</label>
<div class="layui-input-block">
<select id="Select01" size="1"></select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"> </label>
<div class="layui-input-block">
<input type="button" value="打印电子面单" onclick="print();">
</div>
</div>
</div>
<div id="printContext" class="ordercontent"
style="margin-top: 15px; width: 630px; height: 665px; float: left; overflow-y: auto; text-align: center; display:block;">
<div id="expressPrintArea">
<style>
.wayBill li {
float: left;
width: 85px;
}
.wayBill li a:hover {
color: blue;
}
.wayBill li a {
color: blue;
}
#expressPrintArea {
width: 100mm;
height: 180mm;
margin-left: 100px;
/* float: left; */
/* background: url('../images/order/lttBackground.jpg') no-repeat; */
background-size: 104mm 175mm;
padding: 4mm 0.5mm 0.5mm 2.3mm;
}
td {
border: 0.2mm solid #404040;
padding-left: 1mm;
font-size: 12px;
font-family: 宋体;
vertical-align: middle;
text-align: left;
}
tr {
width: 100%;
border-left:0mm;
border-right:0mm;
border: 0.3mm solid #000000;
}
.singlePlane{
font-size: 7pt;
width:60mm;
font-family:黑体;
text-align:left;
valign:top;
}
.sign{
font-size:8pt;
width:60mm;
font-family:黑体;
text-align:right;
padding-top: 2mm;
}
.singlePlane2{
font-size:7pt;
/*width:99mm;*/
font-family:黑体;
text-align:left;
valign:top;
padding-left: 1mm;
padding-right: 1mm;
}
.singlePlane2 span {
word-break: break-all;
word-wrap: break-word;
}
.houseCode td{
font-size:17px;width:20mm;font-family:黑体; font-weight:bold; text-align:center;
}
.originalNumber {
font-size: 15px;
font-weight: bold;
}
#cargoName {
font-size: 16px;
font-weight: bold;
}
#transNote {
font-weight: bold;
}
#transNote {
font-size: 10px;
}
.top-amount td span, .top-amount td strong, .outerField1, .signSheet {
font-size: 10px !important;
font-family: "黑体";
}
#payTypeId {
font-family: "黑体";
font-size: 32px;
}
#picPackageInfo {
padding: 0;
margin: 0;
}
#picPackageInfo ul {
margin-left: 0;
text-align: center;
padding: 0;
margin: 0;
}
#picPackageInfo ul li {
font-size: 14pt;
font-family: "黑体";
list-style: none;
padding: 0;
margin: 0 auto;
}
td#strategyLogoArea {
border: 0;
}
td#goodsInfoArea {
text-align: left;
border: 0;
}
td#strategyLogoArea div#strategyLogo {
text-align: center;
}
td#strategyLogoArea div#strategyLogo img {
text-align: center;
}
td#strategyLogoArea div.strategyLogoTip {
text-align: center;
font-family: "黑体", "微软雅黑", "宋体";
font-size: 14px;
}
</style>
<table border="1" style="width: 96mm;border-collapse:collapse;">
<!-- 上联 -->
<tr class="tr1" style="height: 0mm; border: 0mm;">
<td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td><td width="2mm" style="border:0mm"></td>
</tr>
<!-- 打印时间 -->
<tr style="height: 10mm;border:0mm;">
<td colspan="10" style="border:0mm;"></td>
<td valign="bottom" colspan="28" style="border:0mm;text-align:center; vertical-align:bottom;font-size:6pt;font-family:宋体;">ZJ 打印时间 2019-09-21 14:40</td>
<td valign="middle" colspan="10" style="border:0mm;text-align:right"><!-- img src="【tel.png】" style="width:15mm"--></td>
</tr>
<!-- 条码 时效 -->
<tr style="height: 22mm;border:0mm;">
<td colspan="36" style="border:0mm;">
</td>
<td colspan="12" valign="middle" style="border:0mm;">
<img src="【时效图片】" style="height:20mm">
</td>
</tr>
<!-- 目的地 路由 -->
<tr style="height: 9mm;border-bottom:0mm">
<td colspan="48" style="border-bottom:0mm;font-size:30pt;font-family:宋体;font-weight:bold">
【路由】
</td>
</tr>
<!-- 收件人 -->
<tr style="height: 17mm;border-top:0mm">
<td colspan="6" style="border-right:0mm;border-top:0mm;text-align:center;"><img
src="【shou.png】" style="width:7mm;"/></td>
<td colspan="42" style="border-left:0mm;border-top:0mm;font-size:10pt;width:90mm;font-family:黑体;font-weight:bold;text-align:left; " id="conMsg">
<span class="conName">【收件人】</span>
<span class="conPhone">【收件人手机】</span>
<span class="conTel"></span><br/><span class="caddress">【收件人地址】</span>
</td>
</tr>
<!-- 已验视-->
<tr style="height: 26mm;">
<td colspan="16" style="vertical-align:top;">
<div style="width:100%;height:6mm;border-bottom: #000 1px solid;text-align:center;font-family:宋体;font-weight:bold;font-size:9pt;padding-top:3pt;">
【月结】
</div>
<span style="font-family:黑体;font-weight:bold;font-size:40pt"></span>
</td>
<td colspan="16" style=""></td>
<td colspan="5" style="font-family:黑体;font-weight:bold;font-size:20pt;color:#ccc">已<br/>验<br/>视</td>
<td colspan="11" style="">
<div style="width:100%;height:17mm;border-bottom: #000 1px solid;text-align:center;">
</div>
</td>
</tr>
<!-- 寄件人 -->
<tr style="height: 11mm;">
<td colspan="6" style="border-right:0mm;text-align:center;"><img
src="【ji.png】" style="width:7mm;"/>
</td>
<td colspan="42" style="border-left:0mm;font-size:9pt;width:90mm;font-family:宋体;text-align:left;">
<span class="shipperName">【寄件人】</span>
<span class="shipperPhone">【寄件人手机】</span><br/>
<span class="saddress">【寄件人地址】</span>
</td>
</tr>
<tr>
<td colspan="24" rowspan="2" style="height:26mm; width:48mm; vertical-align:top;font-size:8pt;">托寄物：【茶叶】</td>
<td colspan="24" style="height:13mm; width:48mm; vertical-align:top;font-size:8pt;">增值服务：</td>
</tr>
<tr>
<td colspan="24" style="height:13mm; width:48mm; vertical-align:top;font-size:8pt;">付款方式：【月结】</td>
</tr>
<tr style="height:16mm; ">
<td colspan="24" style="width:48mm; vertical-align:top;font-size:8pt;">【你的备注】<br/><div id="mail_no_remark"></div></td>
<td colspan="24" style="width:48mm; vertical-align:top;font-size:8pt;">【标志图片】</td>
</tr>
</table>
</div>
</div>
</body>
</html>
注：内容志在分享学习，如需转载请保留原链接，谢谢！
网友评论