LODOP結合針孔印表機實現多聯票據套打

阿新 • • 發佈：2019-02-11

專案中有個需求就是利用針孔印表機實現銷售票據的套打功能。

開始是利用@media print{ } 來控制的哪些元素需要列印，哪些不列印。但是發現調節位置的時候都用的是具體的px，大部分時間都花在了樣式控制上，並且不能相容所有解析度，最後整的頭疼眼花的，最後找了一款列印外掛，實現起來就方便多了，就是LODOP列印外掛。

下面是我結合開發指南以往網上資料最後實現的列印的過程：

前提：本地需要需要事先安裝LODOP外掛

外掛地址：32位 64位

具體介面函式：

●	PRINT_INIT(strPrintTaskName)列印初始化
●	SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)設定紙張大小
●	ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文字項
●	ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加純文字項
●	ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)增加表格項
●	ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor)畫圖形
●	SET_PRINT_STYLE(strStyleName, varStyleValue)設定物件風格
●	PREVIEW列印預覽
●	PRINT直接列印
●	PRINT_SETUP列印維護
●	PRINT_DESIGN列印設計

一，設計列印

列印最主要的就是需要列印的資料應該在什麼位置，所以先要設計資料的位置以及大小，LODOP提供了自主設計的功能：LODOP.PRINT_DESIGN()這個方法會呼叫列印設計介面

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0></object>
<script language="javascript" type="text/javascript">
  function CreatePrintPage() {
//設定具體資料的位置大小以及具體的值

  };    
</script> 
<a href="javascript:;" onclick="javascript:CreatePrintPage();LODOP.PRINT_DESIGN();">模板設計</a><br><br>
<a href="javascript:;" onclick="javascript:CreatePrintPage();LODOP.PREVIEW();">列印預覽</a></body>
</html>

開啟新建的html,點選”模板設計“，如圖

這個其實就是要列印的頁面，但是什麼都沒有，我們要把需要列印的資料放到頁面上，但是具體的位置是需要我們自己設定，為了更準確的調整資料的位置，我們最好事先準備一張票據的照片，而且是1：1的尺寸，這樣設定的資料位置才能有參照，從而能夠最準確。

以我的專案中使用的票據為例，我是印表機掃描後又用工具處理成根實體票據一模一樣大小的票據圖片：

照片準備好以後，我們開始設計：

在設計頁面點選“裝載背景圖”，如圖:

選擇好圖片後，在選擇同一選單下的“調整背景圖”，調整到實際大小，我的票據是241mm*127mm，我調整長為241單位mm，高度自動調整為127mm，列印區域的寬和高我也自己設定到剛好能全部顯示票據的大小(911*485)如圖：

下來就是標出要列印的資料的具體位置，操作如圖：

新建文字123都是需要列印的資料，可以設定字型大小，樣式，列印資料的寬度和高度，自己根據實際情況設定好即可。

設定好以後先預覽列印一下，如果紙張充足，可直接在實體票據上列印，不然建議先打到空白紙，透光對照一下看位置合適與否。

如果資料與資料之間的位置合適但是整體偏上偏下或者偏左偏右的話，我們在整體調整一下，操作如圖：

這個按鈕表示固定，點選一次就可以將整個票據整體拖住移動了，自行調節再列印，重複驗證直至所有位置準確。

二，生成程式碼

當所有設定都沒問題後生成程式碼

這裡的程式碼就是建立列印頁面是初始化的資料，我們放置在函式裡：

function CreatePrintPage() {
	LODOP.PRINT_INITA(-4,1,911,485,"");
	LODOP.ADD_PRINT_SETUP_BKIMG("C:\\Users\\tianzhao\\Desktop\\printBg.png");
	LODOP.SET_SHOW_MODE("BKIMG_WIDTH",911);
	LODOP.SET_SHOW_MODE("BKIMG_HEIGHT",481);
	LODOP.ADD_PRINT_TEXT(123,210,280,20,"新加文字1");
	LODOP.ADD_PRINT_TEXT(341,584,100,20,"新加文字2");
	LODOP.ADD_PRINT_TEXT(377,585,100,20,"新加文字3");
  };

然後我們在開啟這個html點選“列印預覽”，實施列印，就完成了靜態頁面資料的套打。

三，整合到專案

實際專案中我們只需要在createPrintPage的方法裡動態放入真實的資料就行了，比如LODOP.ADD_PRINT_TEXT(123,210,280,20,"新加文字1"); 改成

LODOP.ADD_PRINT_TEXT(123,210,280,20,$("#text1").val());。

四，專案整合相關

Ⅰ引導安裝

實際專案中使用者本地也是要安裝列印外掛的不然無法列印，如何引導使用者安裝是個問題，還好有提供的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]>= 42)||(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]>=42) 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 strHtmInstall="<br><font color='#FF00FF'>列印控制元件未安裝!點選這裡<a href='http://113.10.155.131/install_lodop32.zip' target='_self'>執行安裝</a>,安裝後請重新整理頁面或重新進入。</font>";
    var strHtmUpdate="<br><font color='#FF00FF'>列印控制元件需要升級!點選這裡<a href='http://113.10.155.131/install_lodop32.zip' target='_self'>執行升級</a>,升級後請重新進入。</font>";
    var strHtm64_Install="<br><font color='#FF00FF'>列印控制元件未安裝!點選這裡<a href='http://113.10.155.131/install_lodop64.zip' target='_self'>執行安裝</a>,安裝後請重新整理頁面或重新進入。</font>";
    var strHtm64_Update="<br><font color='#FF00FF'>列印控制元件需要升級!點選這裡<a href='http://113.10.155.131/install_lodop64.zip' 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='CLodopPrint_Setup_for_Win32NT.zip' target='_self'>執行安裝</a>,安裝後請重新整理頁面。</font>";
    var strCLodopUpdate="<br><font color='#FF00FF'>CLodop雲列印服務需升級!點選這裡<a href='CLodopPrint_Setup_for_Win32NT.zip' 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.documentElement.innerHTML=strCLodopInstall+document.documentElement.innerHTML;
                 return;
            } else {

	         if (CLODOP.CVERSION<"2.0.9.0") { 
			if (isIE) document.write(strCLodopUpdate); else
			document.documentElement.innerHTML=strCLodopUpdate+document.documentElement.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.documentElement.innerHTML=strHtmChrome+document.documentElement.innerHTML;
                 if (navigator.userAgent.indexOf('Firefox')>=0)
                     document.documentElement.innerHTML=strHtmFireFox+document.documentElement.innerHTML;
                 if (is64IE) document.write(strHtm64_Install); else
                 if (isIE)   document.write(strHtmInstall);    else
                     document.documentElement.innerHTML=strHtmInstall+document.documentElement.innerHTML;
                 return LODOP;
            };
        };
        if (LODOP.VERSION<"6.2.1.5") {
            if (needCLodop())
            document.documentElement.innerHTML=strCLodopUpdate+document.documentElement.innerHTML; else
            if (is64IE) document.write(strHtm64_Update); else
            if (isIE) document.write(strHtmUpdate); else
            document.documentElement.innerHTML=strHtmUpdate+document.documentElement.innerHTML;
            return LODOP;
        };
        //===如下空白位置適合呼叫統一功能(如註冊語句、語言選擇等):===
        LODOP.SET_LICENSES("","13528A153BAEE3A0254B9507DCDE2839","","");
        //===========================================================
        return LODOP;
    } catch(err) {alert("getLodop出錯:"+err);};
};

如何提高使用者體驗，可以參考以上js。

Ⅱ直接列印

不預覽直接列印，按介面是直接呼叫LODOP.PRINT，但是據說此介面收費，並且頁尾帶有外掛說明，比較尷尬，建議使用預覽LODOP.PREVIEW，預覽頁面有列印按鈕，也可以列印。

Ⅲ預覽背景圖

我們發現了預覽時只有文字格式的資料，看起來不太美觀，介面提供了設定預覽的背景圖，設定如下：

LODOP.ADD_PRINT_SETUP_BKIMG("<img border='0' src='http://s1.sinaimg.cn/middle/721e77e5t99431b026bd0&690'>");//圖片地址 可以是專案中相對路徑圖片，也可以是外鏈圖片
LODOP.SET_SHOW_MODE("BKIMG_PRINT",1);//1代表顯示

效果圖：

調整圖片位置：

 LODOP.SET_SHOW_MODE("BKIMG_LEFT",-10);
 LODOP.SET_SHOW_MODE("BKIMG_TOP",-8);

第一次利用LODOP做套打，不足之處歡迎指點。

LODOP結合針孔印表機實現多聯票據套打

LODOP結合針孔印表機實現多聯票據套打

帝國cms結合項如何實現多條件查詢

Condition實現多線程順序打印

初涉RxAndroid結合Glide實現多圖片載入操作

使用Gateway-Worker實現多人分組實時聊天結合第三方tp

javascript結合nodejs實現多文件上傳

使用Flask結合python實現多臺服務的內存監控

nginxif多條件結合判斷（實現限速）

thinkphp5 結合plupload 實現多圖片的上傳

jdk8新特性（Lambda表示式）結合spring 執行緒池，一行程式碼實現多執行緒

結合apache和tomcat實現多域名、多埠繫結

Hive實現多表級聯統計

Jfinal框架下結合ajaxFileupload實現多檔案上傳

tomcat結合nginx實現多個tomcat同時執行，tomcat負載均衡

MFC重寫CView的getDocument（）函式沒有實現多型，只是靜態聯編

webuploader結合SpringMVC實現多圖片上傳（附原始碼）

Bootstrap-Table+Select2+SpringBoot實現多選級聯

單體物聯平臺系統（Springboot整合shiro實現多realm多用戶表多權限表登陸）

Mysql實現級聯操作（級聯更新、級聯刪除）

JavaScript基礎 submit按鈕結合onclick事件實現表單的提交與驗證

LODOP結合針孔印表機實現多聯票據套打

相關推薦