我們在網頁開發過程中經常會有打印頁面的需求，通過JS來實現的方法有很多，這里我做了一個整理，供大家參考。
方式一：window.print()
整體打印
|
1
|
<
a
href
=
"javascrīpt:window.print()"
rel
=
"external nofollow"
target
=
"_self"
>打印</
a
>
|
現在就輕松實現了頁面的打印，但是這種方式會將整個頁面打印，如果想要實現指定區域的打印需要通過下面的設置
局部打印
首先，在html中，通過star和end來標記打印區域
|
1
2
3
4
5
6
7
8
|
<
h1
>這塊內容不需要打印</
h1
>
<!--startprint-->
<
div
class
=
"content"
>
這里是需要打印的內容
.....
</
div
>
<!--endprint-->
<
h1
>這塊內容不需要打印</
h1
>
|
然后，在點擊事件中添加如下代碼
|
1
2
3
4
5
6
7
8
9
|
function
doPrint() {
bdhtml=window.document.body.innerHTML;
sprnstr=
"<!--startprint-->"
;
eprnstr=
"<!--endprint-->"
;
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
}
|
過濾打印區域的內容
例如
|
1
2
3
4
5
6
7
8
|
<!--startprint-->
<
div
class
=
"content"
>
<
button
class
=
"noprint"
>預覽</
button
>
<
button
class
=
"noprint"
>打印</
button
>
這里是需要打印的內容
.....
</
div
>
<!--endprint-->
|
上面的預覽和打印按鈕不希望打印，如果要過濾的話可以做下面的樣式設置
|
1
2
3
4
5
6
7
|
<style type=
"text/css"
>
@media
print
{
.noprint{
display
:
none
;
}
}
</style>
|
or
|
1
2
3
4
5
|
<style type=
"text/css"
media=
"print"
>
.noprint{
display
:
none
;
}
</style>
|
兩種寫法任選其一
分頁打印
使用 window.print() 打印時，如果內容超出會自動分頁。但是我們如果需要自定義分頁范圍，如碰到表格分頁打印，可以通過進行如下設置：
|
1
2
|
<
table
width
=
"100%"
border
=
"0"
cellpadding
=
"0"
cellspacing
=
"0"
style
=
"page-break-after:always"
>
</
table
>
|
方式二、jqprint()
jqprint是一個基於jQuery編寫的頁面打印的一個小插件，但是不得不承認這個插件確實很厲害，最近的項目中幫了我的大忙，在Web打印的方面，前端的打印基本是靠window.print()的方式進行打印的，而這個插件在其基礎上進行了進一步的封裝，可以輕松實現打印網頁上的某個區域，這是個亮點。
參考網址：http://www.jb51.net/article/102230.htm
請注意!很多朋友遇到 Cannot read property 'opera' of undefined 錯誤問題是juqery版本兼容問題
解決方法：加入遷移輔助插件 jquery-migrate-1.0.0.js可解決版本問題
引入
|
1
2
|
<
script
language
=
"javascript"
src
=
"jquery-1.4.4.min.js"
></
script
>
<
script
language
=
"javascript"
src
=
"jquery.jqprint-0.3.js"
></
script
>
|
js
|
1
2
3
4
5
|
<script language=
"javascript"
>
function
a(){
$(
"#ddd"
).jqprint();
}
</script>
|
html
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<
div
id
=
"ddd"
>
<
table
>
<
tr
>
<
td
>test</
td
>
<
td
>test</
td
>
<
td
>test</
td
>
<
td
>test</
td
>
<
td
>test</
td
>
</
tr
>
</
table
>
</
div
>
<
input
type
=
"button"
onclick
=
" a()"
value
=
"打印"
/>
|
設置模板打印
|
1
2
3
4
5
6
|
$(
"#printContainer"
).jqprint({
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
});
|
附言
另外還可以使用html 標簽<object>引入Webbrowser控件（只兼容IE）或者調用windows底層打印，報安全警告，不建議使用（不支持局部打印）
這里只介紹兩種方式，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。