打印插件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="275px;font-size:13px;font-family:楷体,宋体;" >             <div><img src="" id="print_img" style="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;即打印。。。