背景：目前很多项目中均设计到了打印模块，且都需要直接打印，目前公司已购入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;即打印。。。