打印插件LODOP使用介紹

背景:目前不少項目中均設計到了打印模塊,且都須要直接打印,目前公司已購入lodop打印插件,該插件能知足大部分打印相關的功能。javascript

使用方法:http://www.lodop.net/demo.html html

1. 在一下LodopFuncs.js裏須要設置公司代碼,須要找相關人員索要。java

注意下面的安裝文件(見附件)地址,與你放置的地址須要一直,不然頁面驗證後沒法正常引導安裝。api

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
var  CreatedOKLodop=CreatedOKLodop7766= null ;
 
function  getLodop(oOBJECT,oEMBED){
/**************************
   本函數根據瀏覽器類型決定採用哪一個頁面元素做爲Lodop對象:
   IE系列、IE內核系列的瀏覽器採用oOBJECT,
   其它瀏覽器(Firefox系列、Chrome系列、Opera系列、Safari系列等)採用oEMBED,
   若是頁面沒有相關對象元素,則自動創建一個,重複調用本函數會按上次那個。
   64位瀏覽器指向64位的安裝程序install_lodop64.exe。
**************************/
         var  strHtmInstall= "<br><font color='#FF00FF'>打印控件未安裝!點擊這裏<a href='install_lodop32.exe' target='_self'>執行安裝</a>,安裝後請刷新頁面或從新進入。</font>" ;
         var  strHtmUpdate= "<br><font color='#FF00FF'>打印控件須要升級!點擊這裏<a href='install_lodop32.exe' target='_self'>執行升級</a>,升級後請從新進入。</font>" ;
         var  strHtm64_Install= "<br><font color='#FF00FF'>打印控件未安裝!點擊這裏<a href='install_lodop64.exe' target='_self'>執行安裝</a>,安裝後請刷新頁面或從新進入。</font>" ;
         var  strHtm64_Update= "<br><font color='#FF00FF'>打印控件須要升級!點擊這裏<a href='install_lodop64.exe' target='_self'>執行升級</a>,升級後請從新進入。</font>" ;
         var  strHtmFireFox= "<br><br><font color='#FF00FF'>注意:<br>1:如曾安裝過Lodop舊版附件npActiveXPLugin,請在【工具】->【附加組件】->【擴展】中先卸它。</font>" ;
         var  LODOP;     
     try {   
          //=====判斷瀏覽器類型:===============
          var  isIE    =  (navigator.userAgent.indexOf( 'MSIE' )>= 0 ) || (navigator.userAgent.indexOf( 'Trident' )>= 0 );
          var  is64IE  = isIE && (navigator.userAgent.indexOf( 'x64' )>= 0 );
          //=====若是頁面有Lodop就直接使用,沒有則新建或使用上次的:==========
          if  (oOBJECT!= undefined  || oEMBED!= undefined ) {
                  if  (isIE) LODOP=oOBJECT;
          else  LODOP=oEMBED;
          else  {
          if  (CreatedOKLodop== null  || CreatedOKLodop7766== null  || CreatedOKLodop!=CreatedOKLodop7766){
                  LODOP=document.createElement( "object" );
              LODOP.setAttribute( "width" , 0 );
                      LODOP.setAttribute( "height" , 0 );
              LODOP.setAttribute( "style" , "position:absolute;left:0px;top:-100px;" ); 
              if  (isIE) LODOP.setAttribute( "classid" , "clsid:2105C259-1E0C-4534-8141-A753534CB4CA" );
              else  LODOP.setAttribute( "type" , "application/x-print-lodop" );      
              document.documentElement.appendChild(LODOP);
                  CreatedOKLodop=CreatedOKLodop7766=LODOP;           
              else  LODOP=CreatedOKLodop;
          };
          //=====判斷Lodop插件是否安裝過,沒有安裝或版本太低就提示下載安裝:==========
          if  ((LODOP== null )||( typeof (LODOP.VERSION)== "undefined" )) {
          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;
          else
          if  (LODOP.VERSION< "6.1.6.4" ) {
         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( "xxxxxxxxx" , "xxxxxxxxxx" , "" , "" );
 
 
          //============================================================     
          return  LODOP;
     } catch (err){
         if  (is64IE)
         document.documentElement.innerHTML= "Error:" +strHtm64_Install+document.documentElement.innerHTML; else
         document.documentElement.innerHTML= "Error:" +strHtmInstall+document.documentElement.innerHTML;
          return  LODOP;
     }
}

2. 頁面引用該js瀏覽器

1
<script language= "javascript"  src= "jsp/LodopFuncs.js" ></script>

引用後打開改頁面會自動去校驗瀏覽器是否存在插件,若不存在會提示以下圖app

麥庫截圖20141512155308200.jpg 

安裝後重啓瀏覽器便可。(目前谷歌瀏覽器插件貌似打開一次就要安裝一次,母雞什麼問題)jsp

3. 目前使用的大部分都是部分打印網頁,故在網頁里加入打印的元素,舉個栗子,以下代碼,這裏須要打印的是div_print裏面的全部內容ide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id= "div_print"  style= "display:none" >
         <div style= "width:275px;font-size:13px;font-family:楷體,宋體;"  >
             <div><img src= ""  id= "print_img"  style= "width:100%" ></div>
             <div style= "text-align:center;line-height:24px;" >< label  id= "print_name" ></ label ></div>
             <div style= "text-align:center;font-size: 13px;font-weight: bold;padding-bottom:2px" >貴賓卡號:< label  id= "print_cardno" ></ label ></div>
             <div style= "border-top:black solid 1.5px;border-bottom:black solid 1.5px;" >
                 <div style= "text-align:center;font-size: 22px;padding-top:3px" >< label  id= "print_content" ></ label ></div>
                 <div style= "text-align:center;font-size: 22px;padding-top:3px" >< label  id= "print_discount" ></ label ></div>
                 <div style= "line-height:21px;" >使用有效期:< label  id= "print_enddate" ></ label ></div>
                 <div  class = "print_userange" >< label  id= "print_memo" ></ label ></div>
             </div>
             <div style= "line-height:22px;" >操做人員:<lable id= "print_oper" ><%=seqno %></ label >    日期:<lable id= "print_operdate" ><%=today %></ label ></div>
             <div style= "text-align:center;margin:0 auto" >
                 <div id= "div_barcodetarget"  style= "margin:0 auto;text-align:center" ></div>
             </div>
         </div>
     </div>

以上是曾經用到的一個例子,頁面寬度什麼的可定可不定,看打印效果。函數

4. 當須要打印的內容都填充好後,調用lodop方法,這裏已封裝了一個方法:工具

1
2
3
4
5
6
7
8
setPrint: function (id){
         LODOP=getLodop(); 
         LODOP.PRINT_INIT( "打印" );
         var  height = $( "#" +id).height()+ 10 ;
         LODOP.ADD_PRINT_HTM( 0 , 0 , "100%" ,height,document.getElementById(id).innerHTML);
         LODOP.SET_PRINT_PAGESIZE( 3 , 780 ,height/ 25 , "" );
         return  LODOP;
     },

LODOP.SET_PRINT_PAGESIZE(3,780,height/25,"");  這個是寬度高度,根據打印效果設置。具體設置看api

5. LODOP.PRINT;即打印。。。

相關文章
相關標籤/搜索