我们在网页开发过程中经常会有打印页面的需求，通过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()的方式进行打印的，而这个插件在其基础上进行了进一步的封装，可以轻松实现打印网页上的某个区域，这是个亮点。
参考网址：//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底层打印，报安全警告，不建议使用（不支持局部打印）