js网页打印,js打印,javascript局部打印,网页局部打印方法
找了这个打印效果,感觉还不错,采集过来作为记录
在网页中经常看到有打印功能,点击之后,只针对特定区域进行的打印。网上看了一下,大体上有2中实现方法,一种是用css @media控制,另一种是直接用js控制。下面分别来对其进行说明一下!
一、css控制网页局部打印
关于css控制打印,我之前的一篇文章写过css @media,不知道大家有没有印象了~~主要是介绍Media Query方法
也引进了css2的media
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
media可以是all,也可以是print ,加入是print,那么这个css只有在打印的时候才加载。那么这样就好办了,我们可以写针对css打印的样式,有些地方在打印的时候不显示,那么直接用display:none来设置不就可以了嘛!
除了上面的这种写法之外,还可以这么写
@media print { .noprint { display: none; } }
当你打印的时候noprint 类下面的所有内容不显示,不打印的时候显示。
举例:
<div class="noprint" > <table style="margin:0 auto;width:500px;"> <tr align="center" ><td> <object id="WebBrowser" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0" width="0"> </object> <input type="button" value="打印" onclick="document.all.WebBrowser.ExecWB(6,1)"> <input type="button" value="页面设置" onclick="document.all.WebBrowser.ExecWB(8,1)"> <input type="button" value="直接打印" onclick="document.all.WebBrowser.ExecWB(6,6)"> <input type="button" value="打印预览" onclick="document.all.WebBrowser.ExecWB(7,1)"> </td></tr> </table> </div>
这些内容在打印之前是显示的,当你点击打印的时候,会用上面的样式,不显示。达到了局部打印的效果!
二、js局部打印
直接上案例
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>haorooms js局部打印案例</title> <script type="text/javascript"> 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(); } </script> </head> <body> <p>1不需要打印的地方</p> <p>2这里不要打印啊</p> <!--startprint--><!--注意要加上html里star和end的这两个标记,之前没加,一直没效果,谁叫咱们菜呢~--> <h1>打印标题</h1> <p>打印内容~~</p> <!--endprint--> <button type="button" onclick="doPrint()">打印</button> <p>1haorooms博客不打印的地方啊哈哈哈哈</p> <p>2</p> </body> </html>
可以把上面的代码黏贴到网页中,试一试,只有做了标记的地方打印了,代码很简单,相信你也看得懂。
关于网页打印,今天就说这么些,希望大家留言相互交流啊!
本文作者: Liaodeity
本文链接: https://www.jianbaizhan.com/article/449
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!