lodop實現列印的功能(下)
阿新 • • 發佈：2019-02-12
下文都是重點,先碼程式碼,再講原因:
jsp頁面引入lodopfuncs.js檔案
<%--新增列印lodop.js--%>
<script src="${ctxPath }/resources/js/clodop/LodopFuncs.js"></script>
給出一個事件觸發列印事件,這個只是相當於處理資料邏輯,真正的列印執行在print方法中,createPage是拼接頁面列印效果.
此時,因為我們專案中使用的是一個事件同時執行兩個列印任務.所以我們把不同的列印任務所需的印表機型號(或者返回序號index放入了localstorage中),此時獲取到localstorage中的印表機序號
var LODOP; var storage=window.localStorage; function rePrintOrder(orderId) { var row = $(".easyui-datagrid").datagrid("getSelected"); if(row==null){ alert("請選中您要列印的訂單資訊"); return; } var username=row.userName; var paymentType=row.paymentType.value; var money=row.paymentPrice; var details=[]; /*ajax根據orderId獲取到所有的商品結果集*/ var url='${ctxPath}/order/orderDetailList.html'; $.ajax({ url: url, data: {id: orderId}, success: function (rsData) { if (rsData.message.code != "0") { syscore.alert('提示', rsData.message.mess, 'error'); return; } var goodsList=rsData.result.data; console.log(goodsList); for(var i=0;i<goodsList.length;i++){ details.push(goodsList[i]); } CreatePrintPage3(username,paymentType,money,details); LODOP.PRINT(); } }); }
建立拼接列印頁面:
function CreatePrintPage3(username,paymentType,money,details) { console.log(details); var opTimeFmt = syscore.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'); LODOP=getLodop(); LODOP.PRINT_INIT("訂單資訊列印"); //設定pos紙印表機 5830 選擇印表機5830 LODOP.SET_PRINTER_INDEX(storage.getItem("orderPrint")); // 設定基本樣式 LODOP.SET_PRINT_STYLE("FontSize",10); // 離紙張頂端5px、距左邊5px、寬190px、高10px LODOP.ADD_PRINT_TEXT(10, 10, 360, 20, "******* 牛牛的店 *******"); //新增列印內容 LODOP.ADD_PRINT_TEXT(30,10,360,20,"收款員: "+username); LODOP.ADD_PRINT_TEXT(50,10,360,20,"時間:"+opTimeFmt); LODOP.ADD_PRINT_TEXT(70,10,360,20,"商品名稱 "+" 數量 "+"價格"); var height=70; //頁面美觀,商品名稱大於9位的取9位 for(var i=0;i<details.length;i++){ height+=20; var goodsName=details[i].goodsName; if(goodsName.length<9){ LODOP.ADD_PRINT_TEXT(height,10,360,20,goodsName+" "+details[i].amount+" "+details[i].salePrice); }else{ goodsName=goodsName.substring(0,8); LODOP.ADD_PRINT_TEXT(height,10,360,20,goodsName+" "+details[i].amount+" "+details[i].salePrice); } } height+=20; LODOP.ADD_PRINT_TEXT(height,10,360,20,"支付方式: "); height+=20; if(paymentType=="銀行卡"){ LODOP.ADD_PRINT_TEXT(height,10,360,20,"銀行卡:"+money); }else{ LODOP.ADD_PRINT_TEXT(height,10,360,20,"銀行卡: 0.00"); } height+=20; if(paymentType=="現金"){ LODOP.ADD_PRINT_TEXT(height,10,360,20,"現金:"+money); }else{ LODOP.ADD_PRINT_TEXT(height,10,360,20,"現金: 0.00"); } height+=20; if(paymentType=="一卡通"){ LODOP.ADD_PRINT_TEXT(height,10,360,20,"一卡通:"+money); }else{ LODOP.ADD_PRINT_TEXT(height,10,360,20,"一卡通: 0.00"); } height+=20; if(paymentType=="銀行卡"){ LODOP.ADD_PRINT_TEXT(height,10,360,20,"第三方支付:"+money); }else{ LODOP.ADD_PRINT_TEXT(height,10,360,20,"第三方支付: 0.00"); } LODOP.ADD_PRINT_TEXT(height+20,10,360,20,"===========結束=========="); // 如果要把水印往下一點，則取消下面這一行的註釋 //LODOP.ADD_PRINT_TEXT(125, 5, 360, 20, ""); LODOP.ADD_PRINT_BARCODE(5, 280, 100, 100); LODOP.SET_PRINT_PAGESIZE(1, 1000, 150, 20); };
注意:print_init一定要在set屬性的最上面,相當於初始化一個列印任務.set_print_index(index);方法是獲取到本機中指定列印序號index的印表機.
下面就是我們看一下,獲取到指定印表機的序號:
/*=======================設定標籤印表機 開始==========================*/
function SelectAsDefaultPrinter4tag() {
LODOP = getLodop();
if (LODOP.CVERSION) {
LODOP.On_Return = function (TaskID, Value) {
if (Value >= 0) {
//將選擇的tag印表機序號存入cookie中
if (Value >= 0) {
//將選擇的tag印表機序號存入cookie中
if (!window.localStorage) {
syscore.alert('提示','該瀏覽器不支援localstorage','info');
return false;
} else {
storage.setItem("tagPrint", Value);
console.log(storage.getItem("tagPrint"));
}
syscore.alert('提示','選擇成功','info');
} else {
syscore.alert('提示','選擇失敗','info');
}
}
;
LODOP.SELECT_PRINTER();
return;
};
if (LODOP.SELECT_PRINTER() >= 0)
syscore.alert('提示','選擇成功','info'); else syscore.alert('提示','選擇失敗','info');
}
;
}
/*=======================設定標籤印表機 結束==========================*/設定預設印表機,會在頁面有一個彈窗,我們選擇印表機後,會返回該印表機在本地的列印序號.
這樣我們的localstorage就記錄住了,以後就不需要再選擇印表機了.
畫重點:
看lodopfuncs.js中的內容:
var CreatedOKLodop7766=null;
//====判斷是否需要安裝CLodop雲列印伺服器:====
function needCLodop(){
try{
var ua=navigator.userAgent;
if (ua.match(/Windows\sPhone/i) !=null) return true;
if (ua.match(/iPhone|iPod/i) != null) return true;
if (ua.match(/Android/i) != null) return true;
if (ua.match(/Edge\D?\d+/i) != null) return true;
var verTrident=ua.match(/Trident\D?\d+/i);
var verIE=ua.match(/MSIE\D?\d+/i);
var verOPR=ua.match(/OPR\D?\d+/i);
var verFF=ua.match(/Firefox\D?\d+/i);
var x64=ua.match(/x64/i);
if ((verTrident==null)&&(verIE==null)&&(x64!==null))
return true; else
if ( verFF !== null) {
verFF = verFF[0].match(/\d+/);
if ((verFF[0]>= 41)||(x64!==null)) return true;
} else
if ( verOPR !== null) {
verOPR = verOPR[0].match(/\d+/);
if ( verOPR[0] >= 32 ) return true;
} else
if ((verTrident==null)&&(verIE==null)) {
var verChrome=ua.match(/Chrome\D?\d+/i);
if ( verChrome !== null ) {
verChrome = verChrome[0].match(/\d+/);
if (verChrome[0]>=41) return true;
};
};
return false;
} catch(err) {return true;};
};
//====頁面引用CLodop雲列印必須的JS檔案：====
if (needCLodop()) {
var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
var oscript = document.createElement("script");
oscript.src ="http://localhost:8000/CLodopfuncs.js?priority=1";
head.insertBefore( oscript,head.firstChild );
//引用雙埠(8000和18000）避免其中某個被佔用：
oscript = document.createElement("script");
oscript.src ="http://localhost:18000/CLodopfuncs.js?priority=0";
head.insertBefore( oscript,head.firstChild );
};
//====獲取LODOP物件的主過程：====
function getLodop(oOBJECT,oEMBED){
// 取系統上下文
var curWwwPath=window.document.location.href;
var pathName=window.document.location.pathname;
var pos=curWwwPath.indexOf(pathName);
var localhostPath=curWwwPath.substring(0,pos);
var strHtmInstall="<br><font color='#FF00FF'>列印控制元件未安裝!點選這裡<a href='"+localhostPath+"/pos-web/resources/js/clodop/install_lodop32.exe' target='_self'>執行安裝</a>,安裝後請重新整理頁面或重新進入。</font>";
var strHtmUpdate="<br><font color='#FF00FF'>列印控制元件需要升級!點選這裡<a href='"+localhostPath+"/pos-web/resources/js/clodop/install_lodop32.exe' target='_self'>執行升級</a>,升級後請重新進入。</font>";
var strHtm64_Install="<br><font color='#FF00FF'>列印控制元件未安裝!點選這裡<a href='"+localhostPath+"/pos-web/resources/js/clodop/install_lodop64.exe' target='_self'>執行安裝</a>,安裝後請重新整理頁面或重新進入。</font>";
var strHtm64_Update="<br><font color='#FF00FF'>列印控制元件需要升級!點選這裡<a href='"+localhostPath+"/pos-web/resources/js/clodop/install_lodop64.exe' target='_self'>執行升級</a>,升級後請重新進入。</font>";
var strHtmFireFox="<br><br><font color='#FF00FF'>（注意：如曾安裝過Lodop舊版附件npActiveXPLugin,請在【工具】->【附加元件】->【擴充套件】中先卸它）</font>";
var strHtmChrome="<br><br><font color='#FF00FF'>(如果此前正常，僅因瀏覽器升級或重安裝而出問題，需重新執行以上安裝）</font>";
var strCLodopInstall="<br><font color='#FF00FF'>CLodop雲列印服務(localhost本地)未安裝啟動!點選這裡<a href='"+localhostPath+"/pos-web/resources/js/clodop/CLodop_Setup_for_Win32NT.exe' target='_self'>執行安裝</a>,安裝後請重新整理頁面。</font>";
var strCLodopUpdate="<br><font color='#FF00FF'>CLodop雲列印服務需升級!點選這裡<a href='"+localhostPath+"/pos-web/resources/js/clodop/CLodop_Setup_for_Win32NT.exe' target='_self'>執行升級</a>,升級後請重新整理頁面。</font>";
var LODOP;
try{
var isIE = (navigator.userAgent.indexOf('MSIE')>=0) || (navigator.userAgent.indexOf('Trident')>=0);
if (needCLodop()) {
try{ LODOP=getCLodop();} catch(err) {};
if (!LODOP && document.readyState!=="complete") {alert("C-Lodop沒準備好，請稍後再試！"); return;};
if (!LODOP) {
if (isIE) document.write(strCLodopInstall); else
document.body.innerHTML=strCLodopInstall+document.body.innerHTML;
return;
} else {
/*修改clodop的版本號判斷,不使用最新版的clodop一樣可以實現列印功能*/
if (CLODOP.CVERSION<"2.0.5.3") {
if (isIE) document.write(strCLodopUpdate); else
document.body.innerHTML=strCLodopUpdate+document.body.innerHTML;
};
if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED);
if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT);
};
} else {
var is64IE = isIE && (navigator.userAgent.indexOf('x64')>=0);
//=====如果頁面有Lodop就直接使用，沒有則新建:==========
if (oOBJECT!=undefined || oEMBED!=undefined) {
if (isIE) LODOP=oOBJECT; else LODOP=oEMBED;
} else if (CreatedOKLodop7766==null){
LODOP=document.createElement("object");
LODOP.setAttribute("width",0);
LODOP.setAttribute("height",0);
LODOP.setAttribute("style","position:absolute;left:0px;top:-100px;width:0px;height:0px;");
if (isIE) LODOP.setAttribute("classid","clsid:2105C259-1E0C-4534-8141-A753534CB4CA");
else LODOP.setAttribute("type","application/x-print-lodop");
document.documentElement.appendChild(LODOP);
CreatedOKLodop7766=LODOP;
} else LODOP=CreatedOKLodop7766;
//=====Lodop外掛未安裝時提示下載地址:==========
if ((LODOP==null)||(typeof(LODOP.VERSION)=="undefined")) {
if (navigator.userAgent.indexOf('Chrome')>=0)
document.body.innerHTML=strHtmChrome+document.body.innerHTML;
if (navigator.userAgent.indexOf('Firefox')>=0)
document.body.innerHTML=strHtmFireFox+document.body.innerHTML;
if (is64IE) document.write(strHtm64_Install); else
if (isIE) document.write(strHtmInstall); else
document.body.innerHTML=strHtmInstall+document.body.innerHTML;
return LODOP;
};
};
/*修改lodop的版本號判斷,在6.2以下的版本中都可以使用*/
if (LODOP.VERSION<"6.2.0.4") {
if (!needCLodop()){
if (is64IE) document.write(strHtm64_Update); else
if (isIE) document.write(strHtmUpdate); else
document.body.innerHTML=strHtmUpdate+document.body.innerHTML;
};
return LODOP;
};
//===如下空白位置適合呼叫統一功能(如註冊語句、語言選擇等):===
//===========================================================
return LODOP;
} catch(err) {alert("getLodop出錯:"+err);};
};
東西比較多,就一點點來拆分讀取程式碼:
獲取lodop物件的主過程的函式,我們要修改自己放置安裝包的絕對路徑.這個絕對路徑需要我們自己去修改的,就像我貼的第一張圖片的路徑一樣.引用能夠找到該檔案.
菜鳥一個,之後有新發現,會持續更新.