我們在項目中,會需要用到連接打印機進行打印訂單數據信息等,本次我使用的是 Lodop 進行打印
- 我們會用到 Lodop 的依賴文件
1、安裝軟件
CLodop_Setup_for_Win32NT.exe
2、32版本的運行文件
install_lodop32.exe
3、64版本的運行文件
install_lodop64.exe
4、JS文件
LodopFuncs.js
以上文件已經放在百度網盤:
鏈接:https://pan.baidu.com/s/1JZkTy5iomrPw-iYcr27XWg
提取碼:vpod
- 一、根據項目實際情況,將 LodopFuncs.js 文件中的路徑修改正確
文件第62行,function getLodop(oOBJECT, oEMBED) {},方法裏面的每個 href 改爲你項目中正確的路徑,供用戶打印時下載安裝
- 二、提供打印按鈕
<button class="btn_own btn_toolbar btn-purple no-border" href="#" id="btn_print" onclick="printOwn()" style="border-width: 0;">
<i class="glyphicon glyphicon glyphicon-print blue" class="btn_icon"></i>打印
</button>
- 三、執行打印
- 3-1、引入 LodopFuncs.js
<!-- lodop打印 -->
<script src="<%=path%>/js/lodop/LodopFuncs.js"></script>
- 3-2、定義打印對象
var lodopObj;
- 3-3、加載打印設備
// 加載打印插件
function initPrint() {
var flag = true;
if(null == lodopObj ) {
flag = false;
var loading = layer.msg('正在初始化打印機...', {
icon: 16,
shade: [0.1,'#000'],
time:200000
});
// 防止LODOP 對象加載未完成
setTimeout(function (args) {
// 獲取LODOP
lodopObj = getLodop();
layer.close(loading);
if((!lodopObj) || (!lodopObj.VERSION)){
// Lodop插件未安裝時
// layer.closeAll();
}else {
layer.msg('打印機加載完成,請等待打印', {icon: 1, time: 2000});
printOwn();
}
}, 1000);
}
return flag;
}
- 3-4、打印按鈕的點擊事件
function printOwn() {
// 優先加載打印機
if(initPrint()) {
// 根據查詢需要打印的數據
$.ajax({
url : '<%=path%>/distribute/listOutDistributeDtailForPrint.action',
type : 'post',
dataTpe : 'json',
data : {
"orderId" : row.outNumber
},
success : function (data) {
// 執行打印
toPrint(data, row.outNumber, row.outDate, row.busiUserName, row.storeName, row.storeInName);
},
error: function (data) {
layer.msg('打印異常!');
}
})
}
}
- 3-5、執行打印
// 執行打印
function toPrint(details, orderId, busiDate, busiUserName, outStoreName, inStoreName) {
var resHtml = '<style> table,td,th {border: 1px solid black;border-style: solid;border-collapse: collapse;}table{width:100%;font-size:14px}</style><table border="1">';
resHtml += '<tr>';
resHtml += '<td width="5%">序號</td>';
resHtml += '<td width="40%">商品名稱</td>';
resHtml += '<td width="45%">序列號</td>';
resHtml += '<td width="10%">分撥數量</td>';
resHtml += '</tr>';
// 數量合計
var quantityAll = 0;
var detail = JSON.parse(details);
for(var i =0, len = detail.length; i < len; i++) {
resHtml += '<tr>';
resHtml += '<td style="text-align: center">'+(i+1)+'</td>';
if(1 == detail[i].isDemonstrator){
resHtml += '<td>'+detail[i].skuName+'(演示機)</td>';
}else{
resHtml += '<td>'+detail[i].skuName+'</td>';
}
resHtml += '<td>'+detail[i].serialNumber+'</td>';
resHtml += '<td style="text-align: center">'+detail[i].quantity+'</td>';
resHtml += '</tr>';
quantityAll += parseInt(detail[i].quantity);
}
resHtml += '<tr>';
resHtml += '<td colspan="2" style="text-align: center">合計</td>';
resHtml += '<td></td>';
resHtml += '<td style="text-align: center">'+quantityAll+'</td>';
resHtml += '<td></td>';
resHtml += '</tr>';
resHtml += '</table>';
// 表格上頭的數據
var rHead = '<style> .htable,td,th {border: none;border-style: solid;border-collapse: collapse;}.htable{width:100%;font-size:15px}</style>';
rHead += '<table border="0">';
rHead += '<tr>';
rHead += '<td width="15%">單據編號:</td>';
rHead += '<td width="15%">'+orderId+'</td>';
rHead += '<td width="15%">單據日期:</td>';
rHead += '<td width="25%">'+busiDate+'</td>';
rHead += '<td width="15%">經手人:</td>';
rHead += '<td width="15%">'+busiUserName+'</td>';
rHead += '</tr>';
rHead += '<tr>';
rHead += '<td>調出倉庫:</td>';
rHead += '<td>'+outStoreName+'</td>';
rHead += '<td>調入倉庫:</td>';
rHead += '<td>'+inStoreName+'</td>';
rHead += '<td></td>';
rHead += '<td></td>';
rHead += '</tr>';
rHead += '</table>';
lodopObj.PRINT_INITA(0,0,1200,600,"");
lodopObj.SET_PRINT_MODE("PRINT_NOCOLLATE",1);
lodopObj.ADD_PRINT_TABLE(10,15,"197.88mm",446, rHead);
lodopObj.ADD_PRINT_TABLE(90,15,"197.88mm",446, resHtml);
// 執行打印預覽
lodopObj.PREVIEW();
}
- 3-6、後端查詢數據
@RequestMapping(value = "listAllocationOrderDetails")
@ResponseBody
public String listAllocationOrderDetails(String orderId) {
List<AllocationOrderDetail> list = allocationOrderService.listAllocationOrderDetailByOrderId(orderId);
return JSONArray.toJSONString(list);
}
- 四、打印預覽
如您在閱讀中發現不足,歡迎留言!!!