Lodop使用之WEB套打程序開發

WEB套打可選方案不多，理想的更少，利用免費控件Lodop+JavaScript實現精確套打，算是較為經典的選擇。這種方案其實比較簡單，利用一個htm文件就可以實現模板設計過程，幾乎是“空手套”式的開發，但理解這幾個步驟還是需要點時間，下面一步步詳細演示說明：

第一步：建立一個空白的模板設計文件

把以下超文本代碼復制到一個本地htm文件的body中：

 
           < 
           object  
           id 
           ="LODOP_OB" 
            classid 
           ="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" 
            width 
           =0  
           height 
           =0 
           >  
           
     
           < 
           embed  
           id 
           ="LODOP_EM" 
            type 
           ="application/x-print-lodop" 
            width 
           =0  
           height 
           =0  
           pluginspage 
           ="<%=basePath%>/pages/lodop/install_lodop.exe" 
           ></ 
           embed 
           > 
           
 
           </ 
           object 
           > 
           
 
           < 
           script  
           language 
           ="javascript" 
            type 
           ="text/javascript" 
           > 
           
   
           function 
            CreatePrintPage() {
    LODOP.PRINT_INIT( 
           " 
           套打EMS的模板 
           " 
           );
  }; 
 
           </ 
           script 
           >   
           
進入 
           < 
           a  
           href 
           ="javascript:;" 
            onclick 
           ="javascript:CreatePrintPage();LODOP.PRINT_DESIGN();" 
           >模板設計 
           </ 
           a 
           >< 
           br 
           >< 
           br 
           > 
           
進入 
           < 
           a  
           href 
           ="javascript:;" 
            onclick 
           ="javascript:CreatePrintPage();LODOP.PREVIEW();" 
           >模板的打印預覽 
           </ 
           a 
           > 
          

本文模擬EMS特快專遞單的程序開發，文件起名為printEMS.htm，權且稱它為模板設計文件

第二步：用瀏覽器打開該文件

    在本地文件夾中雙擊該文件就可以打開，但在進入設計之前，你的機器需要安裝Lodop，如果還沒安裝過，

請點擊這里下載Lodop6.058安裝文件(解壓rar后運行那個exe文件)

 

第三步：准備設計

    成功安裝Lodop之后再次打開模板設計文件printEMS.htm，點擊其中“模板設計”鏈接，就彈出如下空白的打印設計窗口：

   為了盡快定位模板中的數據位置，你需要做一張票據掃描圖作為背景，當然沒有掃描圖也能完成，只是需要多摸索幾次，費點時間而已。

   下面是我做的EMS掃描圖，你把該圖另存成一個jpg文件，以便我們一起完成后面的演示步驟。

第四步：裝載背景圖並調整圖片大小

在打印設計窗口，點下圖所示的“裝載背景圖...”菜單，調入以上保存的EMS圖片文件。

   裝載背景圖后，點上圖所示的“調整背景圖...”菜單，彈出下圖“背景圖調整”窗口，設定其中的圖片寬度為209mm,高度113mm會自動變化。

   這個寬度值是我測量實際票據得來的。如果掃描圖是按1:1比例獲得的，那么調整背景圖這一步就免了。

第五步：添加數據內容，開始打印測試

     點下圖所示“插入文本項”菜單，添加打印內容，內容項可以拖拉或精細調整，基本對准之后，點擊“預覽”按鈕（注意旁邊的“打印”按鈕是收費功能，紙上會有水印，而“預覽時的打印”按鈕是完全免費的，我們用后者）。

    把內容打印到薄一點的白紙上，然后在陽光下與真實票據透亮對比，以最左最上的某個內容為基准，其它內容遠近調整，如此反復測試直到所有內容相互位置都對准。

    這一步先做到內容之間的相互位置對准，等下一步處理整體位置。

第六步：整體對准

    由於打印機左邊距或上邊距不一定是零或票據邊緣有誤差，所以盡管第五步打印出來的內容相互之間位置是准確的，但打印到真實票據上仍會整體偏離一些，需要進行整體位置調整。

   點擊下圖紅圈所示的“紙釘”按鈕，“紙釘”彈起后，整個設計版面就可以上下左右調整了，然后按上一步的辦法打印測試，直到整體對准成功。為了避免浪費票 據，打印時仍可用薄白紙測試，注意此時透光對照時，紙張的左邊沿和上邊沿要與票據對齊，通過觀察內容的位置來判斷是否整體對准。

第七步：生成打印模板的程序代碼

    套打測試成功后，點擊第五步圖中所示的“生成程序代碼”菜單，出現下圖結果，這些代碼就是我們需要的模板程序代碼，把他們復制出來，准備融合到你的頁面程序中使用。

第八步：完成打印模板設計文件

想不想知道WEB套打有啥感覺？好，我們先做一個靜態WEB頁面爽一下：把第七步生成的程序代碼，

插入替換第一步的空白設計文件CreatePrintPage函數內，變成如下內容：

 
             < 
             object  
             id 
             ="LODOP_OB" 
              classid 
             ="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" 
              width 
             =0  
             height 
             =0 
             >  
             
     
             < 
             embed  
             id 
             ="LODOP_EM" 
              type 
             ="application/x-print-lodop" 
              width 
             =0  
             height 
             =0  
             pluginspage 
             ="<%=basePath%>/pages/lodop/install_lodop.exe" 
             ></ 
             embed 
             > 
             
 
             </ 
             object 
             > 
             
 
             < 
             script  
             language 
             ="javascript" 
              type 
             ="text/javascript" 
             > 
             
   
             function 
              CreatePrintPage() {
    LODOP.PRINT_INIT( 
             " 
             套打EMS的模板 
             " 
             );
    LODOP.PRINT_INITA( 
             14 
             , 
             11 
             , 
             800 
             , 
             600 
             , 
             " 
             套打EMS的模板 
             " 
             );
    LODOP.ADD_PRINT_TEXT( 
             95 
             , 
             95 
             , 
             75 
             , 
             20 
             , 
             " 
             寄件人姓名 
             " 
             );
    LODOP.ADD_PRINT_TEXT( 
             123 
             , 
             148 
             , 
             194 
             , 
             20 
             , 
             " 
             寄件人單位名稱 
             " 
             );
    LODOP.ADD_PRINT_TEXT( 
             158 
             , 
             101 
             , 
             238 
             , 
             35 
             , 
             " 
             寄件人的詳細地址 
             " 
             );
    LODOP.ADD_PRINT_TEXT( 
             92 
             , 
             446 
             , 
             75 
             , 
             20 
             , 
             " 
             收件人姓名 
             " 
             );
    LODOP.ADD_PRINT_TEXT( 
             122 
             , 
             496 
             , 
             208 
             , 
             20 
             , 
             " 
             收件人單位名稱 
             " 
             );
    LODOP.ADD_PRINT_TEXT( 
             160 
             , 
             460 
             , 
             244 
             , 
             35 
             , 
             " 
             收件人詳細地址 
             " 
             );
    LODOP.ADD_PRINT_TEXT( 
             289 
             , 
             47 
             , 
             178 
             , 
             22 
             , 
             " 
             內件品名 
             " 
             );
    LODOP.ADD_PRINT_TEXT( 
             290 
             , 
             258 
             , 
             100 
             , 
             20 
             , 
             " 
             內件數量 
             " 
             );
    LODOP.ADD_PRINT_TEXT( 
             92 
             , 
             245 
             , 
             100 
             , 
             20 
             , 
             " 
             寄件人電話 
             " 
             );
    LODOP.ADD_PRINT_TEXT( 
             90 
             , 
             608 
             , 
             75 
             , 
             20 
             , 
             " 
             收件人電話 
             " 
             );
  }; 
 
             </ 
             script 
             >   
             
進入 
             < 
             a  
             href 
             ="javascript:;" 
              onclick 
             ="javascript:CreatePrintPage();LODOP.PRINT_DESIGN();" 
             >模板設計 
             </ 
             a 
             >< 
             br 
             >< 
             br 
             > 
             
進入 
             < 
             a  
             href 
             ="javascript:;" 
              onclick 
             ="javascript:CreatePrintPage();LODOP.PREVIEW();" 
             >模板的打印預覽 
             </ 
             a 
             > 
            

 

   把以上內容復制到另外一個htm文件printEMS_OK.htm中，雙擊打開它，點其中的打印預覽，就可以實現簡單的WEB套打了。

   以上八步基本完成了模板設計，並實現靜態頁面套打，但要把模板代碼融合到實際的WEB程序中，還需要做些工作。

第九步：模板程序代碼的使用

把以上CreatePrintPage函數進行簡單改造，原函數如下：

function CreatePrintPage() {
    LODOP.PRINT_INITA(14,11,800,600,"套打EMS的模板");
    LODOP.ADD_PRINT_TEXT(95,95,75,20,"寄件人姓名");
    LODOP.ADD_PRINT_TEXT(123,148,194,20,"寄件人單位名稱");
    LODOP.ADD_PRINT_TEXT(158,101,238,35,"寄件人的詳細地址");
    LODOP.ADD_PRINT_TEXT(92,446,75,20,"收件人姓名");
    LODOP.ADD_PRINT_TEXT(122,496,208,20,"收件人單位名稱");
    LODOP.ADD_PRINT_TEXT(160,460,244,35,"收件人詳細地址");
    LODOP.ADD_PRINT_TEXT(289,47,178,22,"內件品名");
    LODOP.ADD_PRINT_TEXT(290,258,100,20,"內件數量");
    LODOP.ADD_PRINT_TEXT(92,245,100,20,"寄件人電話");
    LODOP.ADD_PRINT_TEXT(90,608,75,20,"收件人電話");
};

把其中的打印內容提出來做為變量參數，函數改成如下樣式：

function CreatePrintPage(strPName,strJJRXM,strJJRDW,strJJRDZ,strSJRXM,strSJRDW,strSJRDZ,strNJPM,strNJSL,strJJRDH,strSJRDH) {
    LODOP.PRINT_INITA(14,11,800,600,strPName);        //打印任務名
    LODOP.ADD_PRINT_TEXT(95,95,75,20,strJJRXM);       //寄件人姓名
    LODOP.ADD_PRINT_TEXT(123,148,194,20,strJJRDW);    //寄件人單位名稱
    LODOP.ADD_PRINT_TEXT(158,101,238,35,strJJRDZ);    //寄件人的詳細地址
    LODOP.ADD_PRINT_TEXT(92,446,75,20,strSJRXM);      //收件人姓名
    LODOP.ADD_PRINT_TEXT(122,496,208,20,strSJRDW);    //收件人單位名稱
    LODOP.ADD_PRINT_TEXT(160,460,244,35,strSJRDZ);    //收件人詳細地址
    LODOP.ADD_PRINT_TEXT(289,47,178,22,strNJPM);      //內件品名
    LODOP.ADD_PRINT_TEXT(290,258,100,20,strNJSL);     //內件數量
    LODOP.ADD_PRINT_TEXT(92,245,100,20,strJJRDH);     //寄件人電話
    LODOP.ADD_PRINT_TEXT(90,608,75,20,strSJRDH);      //收件人電話
};

這個改造后的JS函數還是很好理解的，無論寫入js文件還是直接嵌在頁面內都簡單易用。

如果你改變了內容的字體、大小、粗斜體等格式，代碼還會多一些，但總體來說比較簡潔。

第十步：設置紙張高度，實現連續套打

多數套打業務的票據是連續紙，需要精確地分頁，從而保證連續多頁打印不偏移，

為此以上代碼還要在PRINT_INITA之后加一行SET_PRINT_PAGESIZE語句：

function CreatePrintPage() {
    LODOP.PRINT_INITA(14,11,800,600,"套打EMS的模板");
    LODOP.SET_PRINT_PAGESIZE(1,"209mm","113mm","");//設置紙張高度
    LODOP.ADD_PRINT_TEXT(95,95,75,20,"寄件人姓名");
    LODOP.ADD_PRINT_TEXT(123,148,194,20,"寄件人單位名稱");
    LODOP.ADD_PRINT_TEXT(158,101,238,35,"寄件人的詳細地址");
    LODOP.ADD_PRINT_TEXT(92,446,75,20,"收件人姓名");
    LODOP.ADD_PRINT_TEXT(122,496,208,20,"收件人單位名稱");
    LODOP.ADD_PRINT_TEXT(160,460,244,35,"收件人詳細地址");
    LODOP.ADD_PRINT_TEXT(289,47,178,22,"內件品名");
    LODOP.ADD_PRINT_TEXT(290,258,100,20,"內件數量");
    LODOP.ADD_PRINT_TEXT(92,245,100,20,"寄件人電話");
    LODOP.ADD_PRINT_TEXT(90,608,75,20,"收件人電話");
};

   其中209mm這個紙寬參數意義不大，主要是113mm這個高度參數，它決定了每頁的走紙距離，對連續打印影響很大。這個值是我測量實際票據高度得來的，包含紙張之間的撕孔間隙。理想的測量方式，是若干頁連起來一起測量取其平均高。

   加入紙高控制后的打印預覽如下，你可以連續打印兩頁內容到同一張長一點的白紙上，測試對照一下看看。把以上加入SET_PRINT_PAGESIZE語句的代碼復制進第三個htm文件printEMS_OKM.htm試試。假如從第二頁開始，內容向下偏移，說明紙張高度設置比實際票據大，就減小113mm這個參數值，否則增大它，這個參數可以精確到0.1mm。

第十一步：讓操作者自己調整位置

    以上十步實現的套打可以很精確，但都是以當前打印機為前提。如果你的打印程序要面對許多種類型的打印機，甚至一些未知的打印機類型，那么“打印維護”功能會很有用處。你可以根據情況在程序中把該功能授權給最終操作者或現場技術維護人員，讓使用者自己來調整打印位置，以適應各種類型的打印機。

   打印維護的指令語句是PRINT_SETUP，進入包含該功能的在線文件PrintEMS_OKMSetup.htm,先在打印維護中調整一下打印內容或整體位置，點“應用”按鈕。關閉瀏覽器后重新打開，進入“打印預覽”，看看是否有關聯變化。下圖是打印維護界面，其中能看到“應用”按鈕和“恢復整體缺省”按鈕的位置。

 

 引自： 手把手教你WEB套打程序開發