首頁 > 其他

web列印時隱藏按鈕及其他資訊的方法討論

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

　　［注意：本文允許複製、傳播、轉載、引用。但轉載必須保留本段文字，說明出處。如作為作為商業用途，須徵得本人同意。
　　作者：塞北的雪(northsnow)
　　Blog：http://blog.csdn.net/precipitant］

　　web列印是困擾很多web開發人員的問題。有很多人提出了不同的web列印解決方案，還有很多的商業報表設計師來幫我們（需要付費的，我想很多人不想花這個錢），以前我也寫過一篇關於web列印解決方案的文章：

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

　　本文不會討論這個問題。如果大家對於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> 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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More