打印时隐藏按钮及其他信息方法 -

y150988451

浏览: 198546 次
性别:
来自: 北京

最近访客更多访客>>

lihongvst

WilliamLiu

huqiao1220

bing_zuoan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

打印时隐藏按钮及其他信息方法

博客分类：

html

JavaScript 互联网 Web IE 工作

web打印是困扰很多web开发人员的问题。有很多人提出了不同的web打印解决方案，还有很多的商业报表设计器来帮我们（需要付费的，我想很多人不想花这个钱），本文不会讨论这个问题。如果大家对于web打印各种解决方案感兴趣，可以阅读上文，或者到互联网上搜索。这方面对文章很多。

本文将提供给大家一个在普通ie打印的情况下，如何在打印的报表中省略掉我们不希望看到的东西，保留想要看到的东西，而对于用户来说又是透明的，这样的一个解决方案。
方案如下：

首先应该养成良好的写程序的习惯，就是将各部分都分别包装起来，一般用span或者div，比如：

<html> 
<span id="span1"> 
…… 
</span> 
<span id="span2"> 
…… 
</span> 
</html>

假如我们不想打印span2中的内容，在页面上添加这样一段javascript程序：

<script> 
//-----   下面是打印控制语句   ---------- 
window.onbeforeprint=beforePrint; 
window.onafterprint=afterPrint; 
//打印之前隐藏不想打印出来的信息 
function beforePrint() 
{ 
span2.style.display='none'; 
} 
//打印之后将隐藏掉的信息再显示出来 
function afterPrint() 
{ 
span2.style.display=''; 
} 
</script>

这样，当用户打印本页的，打印的纸张上，就看不到span2中的内容。而用户根本感觉不到。

更具上面的一个小例子，我们可以有了一点入门了吧，我们只要合理的分割包装整个页面，我们就可以灵活的控制整个页面的打印输出。如果我们在页面上设计了打印按钮，只要这样写就可以了：

<a href="#" onclick="beforePrint();window.print();afterPrint();">打印</a> 

　　另外如果我们想把查询的表格中的某列或某行省略掉可不可以呢？答案是肯定的，不过我们需要做更多的工作，假如我们要隐藏一列。例子代码如下：


<table cellspacing="0" border="1" bordercolor="#000000" class="tableBorder2" cellpadding=0    width="100%"> 
       <tr height="25"> 
         < td valign="center" align="left" name="op_TD" width="18%" class="noticetitle" background ="../../images/topbg.gif">&nbsp;操作</td>         
         < td valign="center" align="left" width="12%" class="noticetitle" background ="../../images/topbg.gif">&nbsp;车型</td> 
                                                </tr> 
                         
         <tr> 
          <td height="23" align="left" class="inputstyle"   name="op_TD" > 
           & nbsp;<a href="cj_forward_mx.asp?cx=CCK231&cj_code=E900&cj=锻工车间&next_gx=锻" target="_blank">明细</a> 
           &nbsp; <a href="cj_forward_card.asp?cx=CCK231&to_cj_code=E900&to_cj= 锻工车间&t_money=840&next_gx=锻" target="_blank">单据</a> 
           </td> 
          <td height="23" align="left" class="inputstyle"> 
           &nbsp;CCK231</td> 
     </tr>     
         <tr> 
          <td height="23" align="left" class="inputstyle"   name="op_TD" > 
           & nbsp;<a href="cj_forward_mx.asp?cx=CCK231&cj_code=C430-2&cj=国凯公司&next_gx=工" target="_blank">明细</a> 
           &nbsp; <a href="cj_forward_card.asp?cx=CCK231&to_cj_code=C430-2&to_cj =国凯公司&t_money=630&next_gx=工" target="_blank">单据</a> 
           </td> 
          <td height="23" align="left" class="inputstyle"> 
           &nbsp;CCK231</td> 
          
         </tr>         
     <tr height="23"> 
                             <td colspan="2" align="right">合计：907,620.00</td> 
                        </tr>                   
      <tr height="30"><td align=right id="aPrint"> 
          <a href="#" onclick="beforePrint();window.print();afterPrint();">打印</a> &nbsp; 
      </td></tr></table> 

这段代码中，我们在想要隐藏的那个列的td中都添加了　name="op_TD"　，把下面的javascript代码加入到本页面内,就可以控制name为 op_TD 的所有td在打印时都隐藏起来。代码如下：


<script> 
//-----   下面是打印控制语句   ---------- 
window.onbeforeprint=beforePrint; 
window.onafterprint=afterPrint; 
//打印之前隐藏不想打印出来的信息 
function beforePrint() 
{ 
     var opTDS=document.getElementsByTagName('TD'); 
     for(var i=0;i<opTDS.length;i++) 
     { 
         if(opTDS[i].name=='op_TD')opTDS[i].style.display='none'; 
     } 
     aPrint.style.display='none';　　//隐藏打印按钮 
} 
//打印之后将隐藏掉的信息再显示出来 
function afterPrint() 
{ 
     var opTDS=document.getElementsByTagName('TD'); 
     for(var i=0;i<opTDS.length;i++) 
     { 
         if(opTDS[i].name=='op_TD')opTDS[i].style.display=''; 
     } 
      aPrint.style.display='';　　　//显示打印按钮 
} 
</script>

分享到：