`
hyw520110
  • 浏览: 220889 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

总结JS打印方法

    博客分类:
  • js
阅读更多

对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="打印" onclick="factory.printing.Print(true)">    
  22. <input type=button value="页面设置" onclick="factory.printing.PageSetup()">    
  23.  <input type=button value="打印预览" onclick="factory.printing.Preview()">              
  24. <input type="button" value="关闭" onclick="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="打印" onclick="factory.printing.Print(true)"> 
<input type=button value="页面设置" onclick="factory.printing.PageSetup()"> 
 <input type=button value="打印预览" onclick="factory.printing.Preview()">           
<input type="button" value="关闭" onclick="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控件功能也比较强大,目前在使用这种方式。

分享到:
评论

相关推荐

    js调用iframe实现打印页面内容的方法

    ### 知识点三:简单的div打印方法 除了iframe和jQuery方法外,还可以通过修改DOM的方式来实现简单的打印功能。这种方法的步骤如下: 1. 创建一个函数,接收打印区域的id作为参数。 2. 使用document.all.item方法...

    JavaScript_打印方法_基于浏览器_详细代码示例

    ### JavaScript打印方法:基于浏览器的详细代码示例 在网页开发中,JavaScript提供了一系列方法来实现页面内容的打印功能,这对于需要用户能够方便地将页面信息打印出来的应用场景尤为重要。本文将深入探讨几种常见...

    js打印设置页边距

    在JavaScript中实现对打印页面的定制化设置,如页边距、页眉和页脚的配置,是一项进阶技能,尤其对于需要精确控制打印输出的Web应用而言至关重要。本文将深入探讨如何使用JavaScript来调整打印时的页边距,设置或...

    asp.net打印方法总结

    ASP.NET打印方法主要涵盖了几种不同的技术和策略,用于在Web应用程序中实现打印功能。以下是详细的说明: 1. **水晶报表**: 水晶报表(Crystal Reports)是一款强大的报表设计工具,支持复杂的报告布局和数据来源...

    JS实现打印两方法.txt

    ### JS实现打印两种方法 #### 一、使用`Object`对象进行打印 在网页开发过程中,打印功能是一项非常实用的功能,它可以方便用户保存当前页面的信息。JavaScript提供了多种方式来实现打印功能,其中一种是通过创建...

    js 进行打印控制 打印时隐藏按钮

    根据给定文件的信息,本文将深入探讨如何使用JavaScript来实现网页打印时的元素隐藏功能,并进一步解析相关的技术细节。 ### 知识点一:JavaScript控制打印 #### 1.1 理解`window.onbeforeprint`与`window....

    js 打印控件

    “lodop47”可能是一个名为LODOP的JavaScript打印服务程序的版本,它是一个跨浏览器的打印解决方案。LODOP通过在客户端提供一个对象,使得开发者可以调用一系列方法来控制打印过程,如设置页面布局、选择打印机、...

    js打印实现各个浏览器预览插件

    总结来说,实现跨浏览器的JS打印预览功能,需要考虑不同浏览器的特性,如IE的ActiveXObject,以及利用jQuery插件来提供统一的用户体验。`jquery-print-preview-plugin`这类插件简化了这一过程,提供了丰富的定制选项...

    js 前端打印demo

    总结来说,"js 前端打印demo"是一个帮助开发者理解和实践前端打印功能的示例,它涵盖了如何利用JavaScript和CSS实现打印优化的关键技术。通过学习和实践这个demo,我们可以提高前端项目的用户体验,特别是在需要提供...

    js打印excel文档,打印table

    总结来说,使用JavaScript打印HTML中的table并将其导出为Excel文档,需要结合jQuery、printArea插件以及可能的FileSaver.js库。通过DOM操作获取表格数据,转换成CSV格式,再创建并保存为Excel文件。这种方法在前端...

    js实现打印

    1. `window.print()`:JavaScript内置的打印方法。 2. jQuery:用于简化DOM操作的库,可以配合插件如`printThis`实现定制化打印。 3. 打印样式的创建:通过CSS媒体查询`@media print`,为打印提供专门的样式。 4. ...

    js实现打印并去除页眉页脚功能

    JS 实现打印并去除页眉页脚功能 JS 实现打印并去除页眉页脚功能是通过修改注册表来实现的,该功能可以在 Web 打印功能中应用。下面对该功能的实现进行详细的知识点总结: 一、注册表修改 在实现打印并去除页眉...

    js打印Web页面

    ### js打印Web页面知识点详解 #### 一、概述 JavaScript 提供了多种方式来实现 Web 页面的打印功能。本文档将详细介绍三种常见的方法,并提供具体的实现步骤与代码示例。 #### 二、指定不打印区域 这种方法适用于...

    js 实现打印 导出excel

    在IT领域,特别是Web开发中,使用JavaScript(简称JS)来实现打印功能和导出数据为Excel文件是非常常见的需求。这种需求通常出现在需要快速分享或存档网页数据的场景下,比如报表系统、数据分析平台等。下面将详细...

    js打印条码(tscactiveXdll)

    总结来说,"js打印条码(tscactiveXdll)"是一个利用JavaScript和TSC的ActiveX控件实现条码打印的技术方案,适用于需要在网页上直接控制TSC条码打印机的场景。通过理解和应用这个技术,开发者可以为他们的Web应用...

    .net 打印控件-js实现效果,C#实现内核

    1. **JavaScript打印预览**: - JavaScript是一种广泛使用的客户端脚本语言,可以在用户的浏览器上执行,提供交互性。在打印场景中,JavaScript可以用于创建打印预览,让用户在实际打印之前检查文档的布局和样式。 ...

    js打印预览(LodopFuncs.js)

    总结起来,LodopFuncs.js是JavaScript实现打印预览功能的一个强大工具,它通过提供丰富的API和良好的跨平台支持,使得开发者能够在网页中轻松实现复杂的打印需求。然而,随着浏览器技术的发展和安全策略的变更,...

    asp.net调用JavaScript打印

    2. **页面打印方法**:包括直接打印、打印预览和设置打印选项。 3. **CSS媒体查询**:利用`media="print"`属性来定义打印时的样式规则。 4. **HTML结构**:页面结构的设计对打印效果的影响。 #### 实现步骤详解: ...

    Web打印设置总结

    最直接的Web打印方法是通过浏览器自带的打印功能来实现。当用户需要打印网页时,可以直接在浏览器的“文件”菜单中选择“打印”选项,或使用快捷键(通常是Ctrl+P),进入打印预览界面。在这里,用户可以调整页边距...

    js web 打印 第三方打印控件免费版本

    本文将详细探讨使用JavaScript(js)进行Web打印,特别是关于“Lodop”这个免费版本的第三方打印控件。 首先,让我们了解一下什么是JavaScript Web打印。在浏览器环境中,JavaScript提供了`window.print()`函数,...

Global site tag (gtag.js) - Google Analytics