您的位置：首页 > Web前端 > JavaScript

JS打印相关技巧

2013-01-12 16:18 232 查看
用户在网页浏览时常常会需要打印页面，这就如果我们设置一个打印按钮或打印预览等功能这样大大方便了用户，下面我们就来说说通过JS实现打印相关的技巧。

一、JS实现打印预览

为了让用户了解要打印的内容，可在打印文档之前设置一个打印预览功能，具体代码如下：

 


<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
</head>
<body>
<OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"
height=0 id=wb name=wb width=0></OBJECT>
<input type=button value=打印预览 onclick="wb.execwb(7,1)">
    <table style="width: 300px">
        <tr>
            <td>
                阿</td>
            <td>
                不</td>
            <td>
                才</td>
        </tr>
        <tr>
            <td>
                的</td>
            <td>
                恶</td>
            <td>
                发</td>
        </tr>
        <tr>
            <td>
                的</td>
            <td>
                发</td>
            <td>
                的</td>
        </tr>
    </table>
</body>
</html>

本例的重点是Object组件。Object组件是IE的一种内置控件，可通过“<OBJECT>”元素实现对组件的调用。调用组件时需要注明组件的“classid”属性，还要设置组件在本文档中的唯一标识id。

 

为了JS代码的准确性，请点击：JS实现打印预览 进行本实例源码下载 

 

二、利用JS打印当前页

网页默认情况下不支持水晶报表等专业打印工具。如果要打印网页则只能调用JavaScript中的打印方法，但可实现的打印效果非常有限。本例介绍最简单的打印方法，具体代码如下：

<html xmlns="http://www.w3.org/1999/xhtml" ><head><title>标题页</title><SCRIPT LANGUAGE="JavaScript">if (window.print) {document.write('<form>'+ '<input type=button name=print value="打印页面" '+ 'onClick="javascript:window.print()"></form>'); }</script></head><body></body></html><html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
<SCRIPT LANGUAGE="JavaScript">
if (window.print) {
document.write('<form>'+ '<input type=button name=print value="打印页面" '	+ 'onClick="javascript:window.print()"></form>');
}
</script>
</head>
<body>
</body>
</html>


本例的重点是JavaScript中的打印方法“window．print”。这是IE自带的打印功能，可自动调用Windows系统中默认的打印机，缺点是打印的数据量大时无法实现分页。

三、JS代码实现只打印iframe的内容

在打印页面时，可以通过正则或某个设计标识，只打印页面的部分内容。那么该如何只打印嵌入到此页面中框架的内容呢?本例学习一个只打印部分内容的新方法，具体代码如下：

<html>
<head>
<title>Untitled</title>
</head>
<body>
<input onclick='prn()' type=button value=print_Ifram5.10e><br>
<iframe id=myframe src="http://www.xue51.com/"> </iframe>
<script>
function prn()
{
var win=window.open("about:blank")
win.moveto(100,100)
win.location=document.all.myframe.src
win.print()
}
</script>
</body>
</html>


当用户单击“print_Iframe”按钮时，其实在后台会打开一个新页面，此页面的内容其实就是框架中的全部内容。然后在新页面中，调用“print’’方法实现框架内容的打印．其实就是一个新页面的打印。

 

四、JS实现隐藏不想打印的页面内容

web页面的打印通常通过调用IE自带的打印功能，但此功能的缺点是只能打印页面中所有内容。如何只打印网页的一部分，而去掉那些不需要打印的内容呢?本例用一个变通的方法实现了局部页面的打印，具体代码如下：

<HTML>
<HEAD>
<TITLE>去除不想打印出的页面元素</title>
<script type="text/javascript">
function preview()
   {
       //获取页面内容
      var bdhtml=document.body.innerHTML;
       var beginstr="<!--startprint-->";
       var endstr="<!--endprint-->";
       //获取要打印的内容
      var  prnhtml=bdhtml.substr(bdhtml.indexOf(beginstr)+17);
       prnhtml=prnhtml.substr(0,prnhtml.indexOf(endstr));
      //预览
       window.document.body.innerHTML=prnhtml
       //打印
      window.print()
}
</script>
</HEAD>
<BODY background="" leftMargin=0 topMargin=0
rightMargin=0 bottomMargin=0
style="BACKGROUND-POSITION: center 50%">
    <!--startprint-->
    <DIV align=center>
    <span>这里是我需要的内容</span>..........
     </DIV>
     <!--endprint-->
    <div align="center">
 <span>这里不是我要的内容</span><br />
<input type="button" value="打印" onclick="preview()" />
    </div>
</BODY>
</HTML>

 

本例主要应用的是字符串内容的截取。在页面中设置两个标记，标记在所需内容的开始和结束位置。首先使用“document．body．innerHTML”获取页面中所有内容，然后利用字符串的“substr”方法截取需要的内容，并更改页面的body内容。最后调用“window．print”方法打印修订后的页面。

五、JS实用使用ExecWB直接打印 

实现打印的方法有两种：window．print和ExecWB组件。本例将学习ExecWB的使用方法。

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>无标题文档</title>
</head>
<body>
<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2
height=0 id=WebBrowser width=0></OBJECT>
<input name=Button onClick=document.all.WebBrowser.ExecWB(6,6)
type=button value=直接打印>
</body>
</html>
 

本例中首先使用OBJECT标签加载ExecWB组件，注意加载时必须指定组件在本页中的唯一标识id。“classid”是组件在组件库中的唯一标识。“ExecWB(6，6)”表示对当前页面进行打印。ExecWB是通过参数中的数值来指定打印效果。

 

以上就是有关JS与打印相关的内容，更多JS效果与教程你可参考《Javascript教程与特效》 ，以上课程为学无忧原创，转载请注明出处。

 
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                javaScript
                                                Js
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航