最近開發過程中遇到了js局部打印的功能，在網上找相關的資料，最終找到了juery.jqprint-0.3.js
和jquery.PrintArea.js兩種。
最初使用的是jquery.jqprint-0.3.js，是在彈窗的情況下使用，即使出現滾動條也依然能夠把所有內容成功打印出來。但是如果在當前頁面div中出現滾動條(div內容過多,出現垂直滾動條)的話,則內容打印不全。所以最終選擇的的是jquery.PrintArea.js。這是我現在發現的最明顯的區別。
這兩個都是打印指定div內的顯示內容。
jquery.PrintArea.js
代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<script language=
"javascript"
src=
"jquery-1.7.1.min.js"
></script>
<script type=
"text/javascript"
src=
"jquery.PrintArea.js"
></script>
$(document).ready(
function
(){
$(
"#print"
).click(
function
(){
$(
".my_show"
).printArea();
});
});
<div class=
"my_show"
>
這個是打印時顯示的。
</div>
<div class=
"my_hidden"
>
這個是打印時隱藏的。
</div>
<input type=
"button"
id=
"print"
/>
|
這個插件還提供了一些參數可配置，使用的方法：$（element).printArea(option).
這個方法我自己沒有用過，大家嘗試，有問題的留言哈。
參數設置：
1.mode：模式，當點擊打印按鈕時觸發模式，默認為iframe，當設置為popup則會新開一個窗口頁面打印。
2.popTitle：設置新開窗口的標題，默認為空。
3.popClose：完成打印后是否關閉窗口，默認為false。
jquery.jqprint-0.3.js
代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<script language=
"javascript"
src=
"jquery-1.7.1.min.js"
></script>
<script language=
"javascript"
src=
"jquery.jqprint.js"
></script>
<script type=
"text/javascript"
>
$(document).ready(
function
() {
$(
"#print"
).click(
function
(){
$(
".my_show"
).jqprint();
})
});
</script>
<div class=
"my_show"
>
這個打印時是顯示的
</div>
<div class=
"my_hidden"
>
這個打印時是隱藏的。
</div>
<input type=
"button"
id=
"print"
/>
|
該插件還提供了一些參數可配置：
debug: false,//如果是true則可以顯示iframe查看效果（iframe默認高和寬都很小，可以再源碼中調大），默認是false
importCSS: true, //true表示引進原來的頁面的css，默認是true。（如果是true，先會找$(“link[media=print]“)，若沒有會去找$(“link”)中的css文件）
printContainer: true,//表示如果原來選擇的對象必須被納入打印（注意：設置為false可能會打破你的CSS規則）。
operaSupport: true//表示如果插件也必須支持歌opera瀏覽器，在這種情況下，它提供了建立一個臨時的打印選項卡。默認是true