打印插件LODOP使用介绍

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

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

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

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

打印插件LODOP使用介绍

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>`

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

打印插件LODOP使用介绍

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

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

<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方法，这里已封装了一个方法：

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