转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> Web开发 >> 正文
web打印时隐藏按钮及其他信息的方法讨论         ★★★★
<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> f
  这段代码中,我们在想要隐藏的那个列的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>

    看了我上面的讲解,我相信大家会有自己的心得了吧,还等什么?自己动手做做吧! 有什么新的想法或疑问,欢迎通过评论或email联系我。northsnow@163.com 或者 ljc@cccar.com.cn


没有相关教程

web打印时隐藏按钮及其他信息的方法讨论

作者:闵涛 文章来源:闵涛的学习笔记 点击数:641 更新时间:2009/4/23 11:26:50
  web打印是困扰很多web开发人员的问题。有很多人提出了不同的web打印解决方案,还有很多的商业报表设计器来帮我们(需要付费的,我想很多人不想花这个钱),以前我也写过一篇关于web打印解决方案的文章:

http://blog.csdn.net/precipitant/archive/2005/01/03/238259.aspx 

  本文不会讨论这个问题。如果大家对于web打印各种解决方案感兴趣,可以阅读上文,或者到互联网上搜索。这方面对文章很多。

  本文将提供给大家一个在普通ie打印的情况下,如何在打印的报表中省略掉我们不希望看到的东西,保留想要看到的东西,而对于用户来说又是透明的,这样的一个解决方案。
  方案如下:
  首先应该养成良好的写程序的习惯,就是将各部分都分别包装起来,一般用span或者div,比如: 

教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台