项目中涉及到与某个知名快递公司合作，需要在自己的系统中实现与快递公司对接，实现下单，查询物流进度以及打印如下快递单
实现思路：
1.通过html的table+css画出这个表格
2.从后台读取相关数据填入表格
3.通过JsBarcode生产条形码
4.通过打印插件Lodop，实现打印功能
画表格
将上图看作两个table, 然后在通过合并行和列的方式，配合使用css构列出一个大致的页面.(注意纸张尺寸和字体样式)
printPage.jsp页面代码：
<html>
<head>
<jsp:include page="../../../../inc/bootstrap.jsp"></jsp:include>
</head
<c:forEach items="${dataList }" var="data" varStatus="i">
<div id="print${i.index +1}">
<body width="378" height="427" style="line-height:1.42857143">
<table width="310" height="150" align="center" style="border:1px solid #333;border-collapse: collapse; " >
<tr>
<td colspan="6" height="40"><img id="billCode${i.index +1}"></img></td>
</tr>
<tr><td width="5" style="border:1px solid #333;font-weight: bold ;font-family:SimHei; font-size: 8px">始发地</td>
<td width="150" style="border:1px solid #333;">
<div style="text-align:left;padding-top:0px; font-weight: bold;font-family:SimHei; font-size: 12px ">${data.sourcetSortCenterName }</div>
<div style="text-align:center;font-weight: bold ；font-family:SimHei; font-size: 20px">${data.originalCrossCode }- ${data.originalTabletrolleyCode }</div>
</td>
<td width="5" style="border:1px solid #333;font-family:SimHei;font-weight: bold ; font-size: 8px">目的地</td>
<td colspan="3" style="border:1px solid #333;font-family:SimHei; font-size: 12px;padding:0;">
<div style="text-align:left;padding-top:0px; font-weight: bold;font-family:SimHei; font-size: 12px ">${data.targetSortCenterName }</div>
<div style="text-align:center;font-weight: bold ；font-family:SimHei; font-size: 20px">${data.destinationCrossCode }-${data.destinationTabletrolleyCode }</div>
</td>
</tr>
<tr>
<td width="5" style="border:1px solid #333;font-family:SimHei; font-size: 12px;padding:0;"></td>
<td colspan="2" style="text-align:center;border:1px solid #333;font-family:SimHei; font-size: 16;padding:0;font-weight: bold ;">${data.siteName }</td>
<td colspan="2" style="text-align:center;border:1px solid #333;font-family:SimHei; font-size: 16;padding:0;font-weight: bold ;">${data.road }</td>
<td style=" text-align:center; border:1px solid #333;font-family:SimHei; font-size: 16;padding:0;font-weight: bold ;">${i.index +1}/${count }</td>
</tr>
<tr>
<td width="5" rowspan="3" style="border:1px solid #333;font-family:SimHei;font-weight: bold; font-size: 10px;padding:0;">收件信息</td>
<td colspan="3" rowspan="3" style="border:1px solid #333;font-family:Microsoft YaHei; font-size: 10px;padding:0;" align="left" valign="top">
<div>${data.receiveAddress }</div>
<div style="padding-bottom:0px;margin-top:10px">${data.receiveName } ${data.receiveTel }</div>
</td>
<td style="border:1px solid #333;font-family:SimHei; font-size: 12px;padding:0;">客户签字</td>
<td style="border:1px solid #333;font-family:SimHei; font-size: 12px;padding:0;"></td>
</tr>
<tr>
<td style="border:1px solid #333;font-family:SimHei; font-size: 12px;padding:0;">运费</td>
<td style="border:1px solid #333;font-family:SimHei; font-size: 12px;padding:0;"></td>
</tr>
<tr>
<td style="border:1px solid #333;font-family:SimHei; font-size: 12px;padding:0;">货款</td>
<td style="border:1px solid #333;font-family:SimHei; font-size: 12px;padding:0;"></td>
</tr>
</table>
<table width="310" height="150" align="center" style="border:1px solid #333;border-collapse: collapse; ">
<tr>
<td height="30" style="text-align:center;padding:0px 0 0px;border:1px solid #333;font-family:SimHei;font-weight:bold; font-size: 15px;" colspan="4" >运单号：${data.deliveryId }</td>
</tr>
<tr>
<td align="left" valign="top" width="150" style="border:1px solid #333;font-family:SimHei; font-size: 12px;" colspan="2" rowspan="3" >
收件信息：${data.receiveTel }<img id="barcode${i.index+1 }"/>
</td>
<td style="border:1px solid #333;font-family:SimHei; font-size: 12px;" align="left" valign="top" colspan="2" rowspan="3">备注:</td>
</tr>
<tr></tr>
<tr></tr>
<tr height="15">
<td width="80" style="text-align:center;padding:0px 0 0px;border:1px solid #333;font-family:SimHei; font-size: 12px;" >${data.agingName }</td>
<td width="20" style="text-align:center;padding:0px 0 0px;border:1px solid #333;font-family:SimHei; font-size: 12px;" ></td>
<td width="20" style="text-align:center;padding:0px 0 0px;border:1px solid #333;font-family:SimHei; font-size: 12px;" ></td>
<td width="20" style="text-align:center;padding:0px 0 0px;border:1px solid #333;font-family:SimHei; font-size: 12px;" >普通</td>
</tr>
<tr >
<td width="150" colspan="2" rowspan="2" style="border:1px solid #333;font-family:SimHei; font-size: 12px;padding:0;" align="left" valign="top" >
<span >寄方信息：</span>
<div>${data.senderAddress }</div>
<div style="margin-top:10px">${data.senderName } ${data.senderTel }</div>
</td>
<td width="100" colspan="2" rowspan="2" style="border:1px solid #333;font-family:SimHei; font-size: 12px;padding:0;word-break: break-all" align="left" valign="top">
<div>商家ID:020K386580</div>
<div>商家订单号:${data.orderId }</div>
</td>
</tr>
<tr></tr>
<tr>
<td height="10" colspan="2" style="border:1px solid #333;font-family:SimHei; font-size: 5;padding:0;">请确认包裹完好，保留此包裹联时，代表您已经正常签收并确认外包裹完好</td>
<td colspan="2" style="border:1px solid #333;font-family:SimHei; font-size: 5
;padding:0;"></td>
</tr>
</table>
</div>
</c:forEach>
<div style="text-align:center;margin-top:10px;margin-bottom:10px;"">
<button class="btn btn-primary" onclick="print()" type="button">打印</button>
</div>
</body>
</html>
html里面嵌套了css代码，且包含打印面单尺寸，排版较乱但功能还是可以实现的
生成条形码
在页面加载的时候通过后台获取的快递单号，生成条形码。
这里有两个条形码，下面那个是通过快递单号生成的条形码，而上面那个是快递单拆单后生成的带拆单号的条形码。
拆单： 张三在京东买了10个商品，由于大小形态不同，10个商品被拆分成5个箱子(袋子)打包，这对应快递物流的时候，就会形成VBXXXX主单号，分单号：VBXXXX-1-5，VBXXXX-2-5，VBXXXX-3-5，VBXXXX-4-5，VBXXXX-5-5
// 页面加载的时候 生成条形码 count--拆单后包裹数量
for(var i = 1 ; i<=count;i++){
//分单号条形码
JsBarcode("#billCode"+i, code+"-"+i+"-"+count+"-", {
format: "CODE128A",//选择要使用的条形码类型
width:1,//设置条之间的宽度
height:30,//高度
fontOptions:"bold",//使文字加粗体或变斜体
margin:2,//设置条形码周围的空白边距
marginLeft:15
});
//主单号条形码
JsBarcode("#barcode"+i, code, {
format: "CODE128A",//选择要使用的条形码类型
width:1,//设置条之间的宽度
height:20,//高度
// fontOptions:"bold",//使文字加粗体或变斜体
fontSize:12,//设置文本的大小
margin:2,//设置条形码周围的空白边距
marginLeft:15
});
}
});
通过Lodop插件实现打印功能
/*
页面点击打印的时候 触发打印事件
每个包裹都对应一张面单
*/
function print(){
var Count = ${count};//包裹数
LODOP=getLodop();
debugger;
for(var i = 1; i <= Count;i++){
LODOP.SET_PRINT_PAGESIZE(1, "100mm","113mm","");
LODOP.NewPage();
LODOP.ADD_PRINT_HTM(5,5,"98mm","110mm",document.getElementById("print"+i).innerHTML);
}
LODOP.PREVIEW();//打印预览
}
在数据列表页面点击某条数据的时候，从后台获取该数据的快递单信息，然后跳转到此printPage.jsp页面，在页面初始化的时候通过生成条形码，最后在页面点击打印的时候生成打印预览，即可完成打印功能.
1450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
