总结JS打印方法

http://ltc603.javaeye.com/blog/123191

 

 

对JS的打印方法总结一下,方便日后查阅。

一.用JS自带函数打印

直接调用

Java代码 复制代码
  1. <a href="javascript:window.print();">打印</a>  
<a href="javascript:window.print();">打印</a>



二.IEWebBrowser组件

介绍

http://support.microsoft.com/default.aspx?scid=kb%3BEN-US%3BQ267240#top
http://support.microsoft.com/kb/q247671/#appliesto

Java代码 复制代码
  1. <OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>    
  2. <input name=Button onClick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开>   
  3. <input name=Button onClick=document.all.WebBrowser.ExecWB(2,1) type=button value=关闭所有>   
  4. <input name=Button onClick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为>    
  5. <input name=Button onClick=document.all.WebBrowser.ExecWB(6,1) type=button value=打印>   
  6. <input name=Button onClick=document.all.WebBrowser.ExecWB(6,6) type=button value=直接打印>   
  7. <input name=Button onClick=document.all.WebBrowser.ExecWB(7,1) type=button value=打印预览>   
  8. <input name=Button onClick=document.all.WebBrowser.ExecWB(8,1) type=button value=页面设置>   
  9. <input name=Button onClick=document.all.WebBrowser.ExecWB(10,1) type=button value=属性>   
  10. <input name=Button onClick=document.all.WebBrowser.ExecWB(17,1) type=button value=全选>   
  11. <input name=Button onClick=document.all.WebBrowser.ExecWB(22,1) type=button value=刷新>   
  12. <input name=Button onClick=document.all.WebBrowser.ExecWB(45,1) type=button value=关闭>  
<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT> 
<input name=Button onClick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开>
<input name=Button onClick=document.all.WebBrowser.ExecWB(2,1) type=button value=关闭所有>
<input name=Button onClick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为> 
<input name=Button onClick=document.all.WebBrowser.ExecWB(6,1) type=button value=打印>
<input name=Button onClick=document.all.WebBrowser.ExecWB(6,6) type=button value=直接打印>
<input name=Button onClick=document.all.WebBrowser.ExecWB(7,1) type=button value=打印预览>
<input name=Button onClick=document.all.WebBrowser.ExecWB(8,1) type=button value=页面设置>
<input name=Button onClick=document.all.WebBrowser.ExecWB(10,1) type=button value=属性>
<input name=Button onClick=document.all.WebBrowser.ExecWB(17,1) type=button value=全选>
<input name=Button onClick=document.all.WebBrowser.ExecWB(22,1) type=button value=刷新>
<input name=Button onClick=document.all.WebBrowser.ExecWB(45,1) type=button value=关闭>



三.使用ScriptX.cab控件

1.下载ScriptX.cab控件

官网http://www.meadroid.com/scriptx/index.asp

2.使用object元素,修改codebase,classid的值

这里调用控件ScriptX.cab

Java代码 复制代码
  1. <OBJECT id="factory" style="DISPLAY: none" codeBase="${rootUrl}js/smsx.cab#VVersion=6,3,435,20"  classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" viewastext></OBJECT>  
<OBJECT id="factory" style="DISPLAY: none" codeBase="${rootUrl}js/smsx.cab#VVersion=6,3,435,20"  classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" viewastext></OBJECT>



这段代码用来加载cab文件,clsid和codebase必须要和你下载的cab中的信息对应,否则组件会加载错误,这两项其实不难找,只要你用winrar打开你下载的cab文件,然后找到扩展名是.inf的文件,然后打开之,就能看到了。

3.调用控件脚本

Print.js文件

Java代码 复制代码
  1. function setPrintBase(headerText,footerText,rootUrl) {   
  2.   
  3.     // -- advanced features  ,未曾使用过,有待确认。   
  4.   
  5.         //factory.printing.SetMarginMeasure(2); // measure margins in inches   
  6.   
  7.         //factory.SetPageRange(false, 1, 3);// need pages from 1 to 3   
  8.   
  9.         //factory.printing.printer = "HP DeskJet 870C";   
  10.   
  11.         //factory.printing.copies = 2;   
  12.   
  13.         //factory.printing.collate = true;   
  14.   
  15.         //factory.printing.paperSize = "A4";   
  16.   
  17.         //factory.printing.paperSource = "Manual feed"   
  18.   
  19.     var header = (headerText==null||headerText=="")?'默认页眉':headerText;   
  20.   
  21.     var footer = (footerText==null||footerText=="")?'默认页角':footerText;   
  22.   
  23.   factory.printing.header = "&b"+header+"&b" ;   
  24.   
  25.   factory.printing.footer = "&b"+footer;   
  26.   
  27.   factory.printing.portrait = true;   
  28.   
  29.   factory.printing.leftMargin =10.00;   
  30.   
  31.   factory.printing.topMargin =10.00;   
  32.   
  33.   factory.printing.rightMargin =10.00;   
  34.   
  35.   factory.printing.bottomMargin =10.00;   
  36.   
  37. }  
function setPrintBase(headerText,footerText,rootUrl) {

    // -- advanced features  ,未曾使用过,有待确认。

        //factory.printing.SetMarginMeasure(2); // measure margins in inches

        //factory.SetPageRange(false, 1, 3);// need pages from 1 to 3

        //factory.printing.printer = "HP DeskJet 870C";

        //factory.printing.copies = 2;

        //factory.printing.collate = true;

        //factory.printing.paperSize = "A4";

        //factory.printing.paperSource = "Manual feed"

    var header = (headerText==null||headerText=="")?'默认页眉':headerText;

    var footer = (footerText==null||footerText=="")?'默认页角':footerText;

  factory.printing.header = "&b"+header+"&b" ;

  factory.printing.footer = "&b"+footer;

  factory.printing.portrait = true;

  factory.printing.leftMargin =10.00;

  factory.printing.topMargin =10.00;

  factory.printing.rightMargin =10.00;

  factory.printing.bottomMargin =10.00;

}




例子

Java代码 复制代码
  1. <%@ page contentType="text/html;charset=GBK"%>   
  2.   
  3. <html>   
  4. <head>   
  5. <meta http-equiv="imagetoolbar" content="no">   
  6. <script language="javascript" src="print.js"></script>   
  7. <style media="print">   
  8. .Noprint   {DISPLAY:   none;}   
  9. </style>   
  10. <title>打印测试</title>   
  11. </head>   
  12. <OBJECT id="factory" style="DISPLAY: none" codeBase="smsx.cab#VVersion=6,3,435,20"  classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" viewastext></OBJECT>   
  13.   
  14. <script defer>   
  15. function window.onload() {      
  16. setPrintBase('页眉','页脚');   
  17. }   
  18. </script>   
  19. <body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">   
  20. <center class="Noprint">   
  21.  <input type=button value="打印" οnclick="factory.printing.Print(true)">    
  22. <input type=button value="页面设置" οnclick="factory.printing.PageSetup()">    
  23.  <input type=button value="打印预览" οnclick="factory.printing.Preview()">              
  24. <input type="button" value="关闭" οnclick="window.close();">   
  25. </center>   
  26.    <center>   
  27.       <table width="100%" border="0" cellpadding="0" cellspacing="0">   
  28.           <tr><td align="center"><b>内容</b></td></tr>   
  29.        </table>   
  30.     </center>   
  31. </body>   
  32. </html>  
<%@ page contentType="text/html;charset=GBK"%>

<html>
<head>
<meta http-equiv="imagetoolbar" content="no">
<script language="javascript" src="print.js"></script>
<style media="print">
.Noprint   {DISPLAY:   none;}
</style>
<title>打印测试</title>
</head>
<OBJECT id="factory" style="DISPLAY: none" codeBase="smsx.cab#VVersion=6,3,435,20"  classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" viewastext></OBJECT>

<script defer>
function window.onload() {   
setPrintBase('页眉','页脚');
}
</script>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<center class="Noprint">
 <input type=button value="打印" οnclick="factory.printing.Print(true)"> 
<input type=button value="页面设置" οnclick="factory.printing.PageSetup()"> 
 <input type=button value="打印预览" οnclick="factory.printing.Preview()">           
<input type="button" value="关闭" οnclick="window.close();">
</center>
   <center>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr><td align="center"><b>内容</b></td></tr>
       </table>
    </center>
</body>
</html>



四.对比

1.Window.print调用方便,但功能简单

2.功能更强大,但使用IEWebBrowser有时会报JS没有权限的错误。

3.ScriptX控件功能也比较强大,目前在使用这种方式。

 

 

 

 

 

附上IE7对ActiveX控件的屏蔽解决方法

 

ie7的安全级别比较高
即便加入安全站点默认规则也是不允许安装未签名的activex
需要在ie工具-internet选项--安全选项卡-- 相对用的组的规则里面把对应的改为启用或者提示

 

 

<!--media=print 这个属性可以在打印时有效-->
<style media=print>
.Noprint{display:none;}
.PageNext{page-break-after: always;}
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值