我们在网页开发过程中经常会有打印页面的需求,通过JS来实现的方法有很多,这里我做了一个整理,供大家参考。
方式一:window.print()
整体打印
<a href="javascrīpt:window.print()" rel="external nofollow" target="_self">打印</a>
现在就轻松实现了页面的打印,但是这种方式会将整个页面打印,如果想要实现指定区域的打印需要通过下面的设置
局部打印
<h1>这块内容不需要打印</h1>
<!--startprint-->
<div class="content">
这里是需要打印的内容 .....
</div>
<!--endprint-->
<h1>这块内容不需要打印</h1>
然后,在点击事件中添加如下代码
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();
}
过滤打印区域的内容
<!--startprint-->
<div class="content">
<button class="noprint">预览</button>
<button class="noprint">打印</button>
这里是需要打印的内容 .....
</div>
<!--endprint-->
上面的预览和打印按钮不希望打印,如果要过滤的话可以做下面的样式设置
<style type="text/css"> @media print { .noprint{ display: none; } }</style>
or
<style type="text/css" media="print"> .noprint{ display: none; }</style>
两种写法任选其一