js网页打印,js打印,javascript局部打印,网页局部打印方法

最新推荐文章于 2024-05-22 15:07:14 发布

晴天暖宝宝

最新推荐文章于 2024-05-22 15:07:14 发布

阅读量2.6k

点赞数 3

文章标签： maven struts intellij-idea java-ee

本文链接：https://blog.csdn.net/txun123/article/details/124308783

版权

一、css控制网页局部打印

举例：

<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>

可以把上面的代码黏贴到网页中，试一试，只有做了标记的地方打印了，代码很简单，相信你也看得懂。

延伸

通过上面的案例，我们可以看到，只要我们把要打印的东西放到document.body.innerHTML中就可以了无论是一行内容，还是图片，还是文字，只要我们把拿到的html代码，赋值给document.body.innerHTML，然后在运用window.print(); 就可以对赋值的代码进行打印了！

问题

上面的方法打印完毕之后，body的内容变掉了，不是我们想要的结果，我们可以使用一个jquery插件来实现：这个插件名字是jquery.printarea.js

使用方法：

<script src="http://www.haorooms.com/theme/assets/js/jquery.js"></script>
<script src="jquery.printarea.js"></script>
<script type="text/javascript">   
    function doPrint() {       
       $("#dayin").printArea();    
}    
</script>

<div id="dayin">
<h1>haorooms打印标题</h1>
<p>haorooms打印的文字</p>
<img src="yideng.png">
<img src="haorooms.png">
</div>

插件下载地址

关于网页打印，今天就说这么些，希望大家留言相互交流啊！

晴天暖宝宝

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
3
评论
js网页打印,js打印,javascript局部打印,网页局部打印方法

一、css控制网页局部打印举例：<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"
复制链接

扫一扫