打印插件LODOP使用介绍

背景：目前不少项目中均设计到了打印模块，且都须要直接打印，目前公司已购入lodop打印插件，该插件能知足大部分打印相关的功能。

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

1. 在一下LodopFuncs.js里须要设置公司代码，须要找相关人员索要。

注意下面的安装文件（见附件）地址，与你放置的地址须要一直，不然页面验证后没法正常引导安装。

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>

引用后打开改页面会自动去校验浏览器是否存在插件，若不存在会提示以下图

 

安装后重启浏览器便可。（目前谷歌浏览器插件貌似打开一次就要安装一次，母鸡什么问题）

3. 目前使用的大部分都是部分打印网页，故在网页里加入打印的元素，举个栗子，以下代码，这里须要打印的是div_print里面的全部内容

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;即打印。。。