我们在网页开发过程中经常会有打印页面的需求,通过JS来实现的方法有很多。下面本篇文章就来给大家介绍几种使用JavaScript打印页面的方法,希望对大家有所帮助。
方式一:window.print()
print() 方法用于打印当前窗口的内容。
调用print()方法所引发的行为就像用户单击浏览器的打印按钮。通常,这会产生一个对话框,让用户可以取消或定制打印请求。
使用window.print()方法打印的页面分几种情况:
1、整体打印打印
现在就轻松实现了页面的打印,但是这种方式会将整个页面打印,如果想要实现指定区域的打印需要通过下面的设置
2、局部打印
首先,在html中,通过star和end来标记打印区域
这块内容不需要打印
这里是需要打印的内容
.....
这块内容不需要打印
然后,在点击事件中添加如下代码function doPrint() {
bdhtml=window.document.body.innerHTML;
sprnstr="";
eprnstr="";
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
}
过滤打印区域的内容
例如
预览
打印
这里是需要打印的内容
.....
上面的预览和打印按钮不希望打印,如果要过滤的话可以做下面的样式设置
@media print {
.noprint{
display: none;
}
}
或:
.noprint{
display: none;
}
分页打印
使用 window.print() 打印时,如果内容超出会自动分页。但是我们如果需要自定义分页范围,如碰到表格分页打印,可以通过进行如下设置:
方式二、jqprint()
jqprint是一个基于jQuery编写的页面打印的一个小插件,但是不得不承认这个插件确实很厉害。
在Web打印的方面,前端的打印基本是靠window.print()的方式进行打印的,而这个插件在其基础上进行了进一步的封装,可以轻松实现打印网页上的某个区域,这是个亮点。
引入
js
function a(){
$("#ddd").jqprint();
}
html
test | test | test | test | test |
设置模板打印$("#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 标签引入Webbrowser控件(只兼容IE)或者调用windows底层打印,报安全警告,不建议使用(不支持