背景:目前不少項目中均設計到了打印模塊,且都須要直接打印,目前公司已購入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
安裝後重啓瀏覽器便可。(目前谷歌瀏覽器插件貌似打開一次就要安裝一次,母雞什麼問題)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;即打印。。。