關於在web項目中實現本地打印

1    問題描述

在web項目，打印功能一直是一個老大難問題，而想進行套打，則更加上難上加難。而我在最近的項目中就遇到的條形碼打印的需求，需要調用客戶端的打印機發送指令進行打印。在由於該項目的用戶在地域分佈上比較廣，就要求功能的實現對用戶來說要儘可能簡單，而目前主流的解決方案主要有以下的幾種

1. 1.     使用瀏覽器本身的打印功能

這種方案的優勢是簡單，不需要對瀏覽器做任何的擴充，但是問題也很多，如

1. 1. 1.     不能精確分頁。瀏覽器一般是根據用戶設置的頁面大小，web頁面的內容多少，來自行決定分頁位置，程序員很難控制。會有頁腳頁眉干擾。
      2.     不能準確對齊邊邊距及打印文字。
      3.     不能解決連續打印。比如，不是僅打印一張票據，而是連續一次打印若干個票據。
   2.     使用webbrowser控件+ javascript

這種方式實際上是使用js來調用瀏覽器的打印功能，實際上和第一種方式沒有太大的區別，只不過是用戶不用再去點擊瀏覽器的打印，而是直接在網頁中點擊一個按鈕罷了了，仍然解決不了第一種方式中的問題

1. 1.     使用print css

這是一種最理想的實現web套打的方法。這種方法通過在html文檔中，嵌入打印相關的css樣式，來實現對html文檔輸出打印的控制，比 如設置紙張大小，紙張縱橫方向，打印邊距，分頁等。顯而易見，這種方式成本小，不需要下載任何插件，而且跨平臺性非常好。print css推出已經有些時日，但遺憾的是，至今沒有一個廠商的瀏覽器很好地實現了這些標準，這使得程序員目前還不能利用print css進行實際的開發。

1. 1.     使用PDF文件

將待打印的目標在程序中格式化後輸出成一個PDF文件，用戶需要打印的時候下載這個PDF文件，使用閱讀器的打印功能進行打印，這種方式需要下載一個瀏覽器的插件。

1. 1.     使用activeX控件方式

這種方案就是下載一個控件，票據的數據不再以html方式呈現，而是呈現在ActiveX中。這種方案的優點是打印的精確度高，分頁的可控性 好，但缺點也是很明顯的，

1. 1. 1.     嵌入ActiveX控件破壞了web應用的整體html風格，
      2.     ActiveX是微軟所開發的，IE之外的瀏覽器要想使用，都是不支持ActiveX控件的
      3.     控件一般都比較大，下載會比較耗時
      4.     ActiveX已經過時，微軟自己現在也已經不在推廣該技術
      5.     控件的開發成本巨大
   2.     使用applet方式

在java項目中常被採用，採用Applet方式，分頁或精確打印，都可以做到完美，但缺點也很明顯，表現在：

1. 1. 1.     Applet的運行依賴於JRE，所以需要在客戶端上安裝JRE
      2.     程序一般較大，下載很耗時
      3.     技術已經過時，現在主流的瀏覽器都已經不支持applet
      4.     Applet的開發成本比較大
   2.     利用第三方的打印服務

主要是利用市面上已經的很多付費的，免費的打印控件，同樣可以做到精確的分頁和文字對齊，同時開發也很方便，但是缺點也存在

1. 1. 1.     需要在所在的客戶端安裝打印服務
      2.     需要在代碼中控制格式
2.        案例分析

在拿到需求後，經過對上面多種打印方式的學習，優缺點分析，嘗試，項目的實際情況的考慮，最終選擇了第七種方式，原因在於

1. 1.     項目需求是進行條形碼打印，在打印的時候需要將生成的條碼傳輸到條碼打印機，而條碼打印機的標籤是有大小限制的，這就類似於套打
   2.     項目屬於公益性項目，如果購買第三方付費的打印插件，成本較高（一般按ip或者是客戶端數據購買licence）
   3.     自己開發打印插件在時間上不允許
   4.     條碼打印機不同於普通打印機，對傳輸的數據編碼方式有嚴格的要求

3 解決方案

經過對多個打印插件的對比，選擇了lodop插件，國產，小巧，簡單上手，開發難度低是選擇它的理由，下面以lodop進行條形碼打印爲例子進行說明。

1. 1.     到lodop官網下載lodop服務www.lodop.net/download.html，根據自己的瀏覽器來選擇進行安裝，安裝完後啓動服務即可，同時官網上還有lodop的開發手冊，也下載一份
   2.     在項目中使用lodop。在下載的開發手冊中，有很多Lodop提供的開發樣例，參考其中的開發樣例進行開發，找到LodopFuns.js，將js拷貝到項目中

• •        

1. 1.     HTML文件的head標籤中加載lodop控件

<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></embed>
   </object>

1. 1.     引入lodopFuns.js，在object標籤的後面引入

script src="<#noparse>${ctxPath}</#noparse>/scripts/printer/LodopFuncs.js" type="text/javascript"></script>

1. 1.     聲明一個全局的lodop對象，並操作打印服務，lodop提供了很多不同形式的打印功能，對應不同的打印函數，具體的函數的使用，可查看lodop提供的打印樣例

//獲取lodop實例

Var LODOP=getLodop(document.getElementById('LODOP1'),document.getElementById('LODOP_EM1'));

//將條碼的數據輸出到Lodop設計器

LODOP.ADD_PRINT_BARCODE(28,34,307,47,"128A","123456789012");

//啓動lodop的條碼設計器進行打印預覽

LODOP.PREVIEW();

1. 1.     調用LODOP.PREVIEW();方法將會彈出lodop打印預覽窗口，在打印預覽窗口可以進行各種打印的設置，選擇指定的打印機進行打印就可以看到效果了
   2.     以上的打印是基於lodop提供的打印設計功能進行打印的，存在兩個缺點
      1.     需要預先對條碼進行定位，點陣計算複雜
      2.     在打印前會啓動lodop的設計器，無形中增加了一步操作，對用戶來說並不友好

在我們項目中使用的斑馬GK888T打印機是支持ZPL指令進行條形碼打印的，查看lodop文檔，發現lodop也支持直接將打印指令打住發送到打印機

/*

直接發送指令進行打印將不會彈出lodop的設計器，因此用戶無法在發送指令前選擇打印機，所以需要先讓用戶選擇打印機，然後再發送指令，該方法將會彈出lodop的打印機選擇窗口，用戶選擇打印機，將會一直生效到下一次選擇打印機之前。

*/

LODOP.SELECT_PRINTER();

 

//設置傳輸指令的格式

LODOP.SET_PRINT_MODE("SEND_RAW_DATA_ENCODE","UTF-8");

if (LODOP.CVERSION) {

         LODOP.On_Return=function(TaskID,Value){ if (Value) alert("發送命令成功"); else alert("發送命令失敗！"); };

//發送打印指令

         LODOP.SEND_PRINT_RAWDATA(strData);

         return;

};

---------------------
原文來自【學領未來】，轉載時請保留原文鏈接。
鏈接：http://bbs.learnfuture.com/topic/290