设为首页收藏本站

搜索
查看: 285|回复: 0

JS实现页面打印

[复制链接]

4

主题

12

帖子

364

积分

中级会员

Rank: 3Rank: 3

积分
364
发表于 2016-10-21 10:14:14 | 显示全部楼层 |阅读模式
1、js实现(可实现局部打印)
  1. <!--打印的实现1:start-->  
  2.   
  3. <input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();" />  
  4.   
  5. <!--将不需要打印的部分,标记为 class="noprint" -->  
  6. <style type="text/css" media=print>  
  7. .noprint{display : none }  
  8. </style>  
  9.   
  10. <p class="noprint">不需要打印的地方</p>  
  11.   
  12. <p>打印的部分</p>  
  13.   
  14.   
  15. <!--打印的实现1:end-->  
复制代码
  1. <!--打印的实现2:start-->  
  2.   
  3. <input id="btnPrint" type="button" value="打印预览" onclick=preview(1) />  
  4. <script>  
  5. function preview(oper)         
  6. {  
  7. if (oper < 10)  
  8. {  
  9. bdhtml=window.document.body.innerHTML;//获取当前页的html代码  
  10. sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域  
  11. eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域  
  12. prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html  
  13. prnhtmlprnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html  
  14. window.document.body.innerHTML=prnhtml;  
  15. window.print();  
  16. window.document.body.innerHTML=bdhtml;  
  17. } else {  
  18. window.print();  
  19. }  
  20. }  
  21. </script>  
  22.   
  23. <p>XXXXX</p>  
  24.   
  25. <!--startprint1-->要打印的内容<!--endprint1-->  
  26.   
  27. 再加个打印按纽 onclick=preview(1)   
  28.   
  29. <!--打印的实现2:end-->
复制代码
2、调用windows底层打印,报安全警告,不建议使用(不支持局部打印)
  1. <HTML>  
  2. <HEAD>  
  3. <TITLE>javascript打印-打印页面设置-打印预览代码</TITLE>   
  4. <META http-equiv=Content-Type content="text/html; charset=gb2312" />   
  5. <SCRIPT language=javascript>   
  6.   function printsetup(){   
  7.   // 打印页面设置   
  8.   wb.execwb(8,1);   
  9.   }   
  10.   function printpreview(){   
  11.   // 打印页面预览   
  12.        
  13.   wb.execwb(7,1);          
  14.        
  15.   }   
  16.   
  17.   function printit()   
  18.   {   
  19.   if (confirm('确定打印吗?')) {   
  20.   wb.execwb(6,6);   
  21.   }   
  22.   }   
  23.   </SCRIPT>   
  24. </HEAD>   
  25. <BODY>   
  26.   
  27. <DIV align=center>   
  28. <OBJECT id=wb height=0 width=0   
  29. classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=wb></OBJECT>   
  30. <INPUT onclick=javascript:printit() type=button value=打印 name=button_print />   
  31. <INPUT onclick=javascript:printsetup(); type=button value=打印页面设置 name=button_setup />   
  32. <INPUT onclick=javascript:printpreview(); type=button value=打印预览 name=button_show />   
  33. 一按开始的减肥了卡时间段  
  34. </DIV>   
  35. </BODY>   
  36. </HTML>
复制代码
3、jQuery实现(支持局部打印)
  1. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>   
  2. <script type="text/javascript" src="jquery.PrintArea.js"></script>   
  3. <script>  
  4. $(document).ready(function(){  
  5.   $("input#biuuu_button").click(function(){  
  6.   
  7.   $("div#myPrintArea").printArea();  
  8.   
  9. });  
  10. });  
  11.    
  12. </script>  
  13.    
  14.   
  15.   
  16.   
  17. <input id="biuuu_button" type="button" value="打印"></input>  
  18.   
  19. <div id="myPrintArea">.....文本打印部分.....</div>   
复制代码








您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ| 小黑屋| 完美起航-论坛     

完美起航-论坛中心。

Copyright © 2001-2013 Okgoes.   All Rights Reserved.

Powered by 完美起航 X3.2( 赣ICP备15002760号 )

快速回复 返回顶部 返回列表