js 网页列印

通過頁面上的一個按鈕的點擊事件,來實現網頁打印.

在這裡講述利用js來實現打印,方法很簡單,講兩種:

第一種:截取

第二種利用樣式使不想打印的不進行打印.

1. 截取js:

        functionPrintDoc()

        {

            // 獲取頁面的所有的代碼

            varallContent = window.document.body.innerHTML;

            vars = allContent;

 

            // 定義兩個變量

            varPrintSt = '<!--PrintSt-->';

            varPrintEnd = '<!--PrintEnd-->';

 

           // 截取需要里列印的數據段,這裡有時候還需要自己調整一下

           s = allContent.substr(0,allContent.indexOf(PrintEnd) - (allContent.indexOf(PrintSt) + PrintSt.length +1));

 

            // 將要列印的數據顯示在頁面上

            window.document.body.innerHTML = s;

 

            // 打印

            window.print();

 

            // 回復原來的頁面

            window.document.body.innerHTML =allContent;

 

            returnfalse;

        }

 

<div>

<table>

<tr>

<td>http://hi.baidu.com/new/zhong635976601</td>

<td>http://hi.baidu.com/new/zhong635976601</td>

</tr>

<tr>

<td>http://hi.baidu.com/new/zhong635976601</td>

<td>http://hi.baidu.com/new/zhong635976601</td>

</tr>

 

</table>

</div>

  <!--PrintSt-->

<div>

<table>

<tr>

<td> qq:635976601</td>

<td> qq:635976601</td>

</tr>

<tr>

<td> qq:635976601</td>

<td> qq:635976601</td>

</tr>

</table>

</div>

<!--PrintEnd-->

<div>

<table>

<tr><td>http://hi.baidu.com/new/zhong635976601</td></tr>

</table>

</div>

調用上面的js后會列印成

 

若是js中直接寫”window.print();”

則效果是:

 

經過上面的舉例講解,你應該明白了,怎麼利用截取字符串的方式進行網頁打印的吧.不明白的可以留言

2. 利用樣式使不想打印的不進行打印.

首先添加樣式:

<style>

        @mediaprint

        {

            .noprint

            {

                display:none;

            }

        }

    </style>

現在還是以上面的例子解釋:

<div>

<table>

<tr>

<td> qq:635976601</td>

<td> qq:635976601</td>

</tr>

<tr>

<td> qq:635976601</td>

<td> qq:635976601</td>

</tr>

</table>

</div>

若還是只想打印這一段,而不像打印其他的,此時很簡單的一個方法就是

<div class=”noprint”>

<table>

<tr>

<td>http://hi.baidu.com/new/zhong635976601</td>

<td>http://hi.baidu.com/new/zhong635976601</td>

</tr>

<tr>

<td>http://hi.baidu.com/new/zhong635976601</td>

<td>http://hi.baidu.com/new/zhong635976601</td>

</tr>

 

</table>

</div>

  <!--PrintSt-->

<div>

<table>

<tr>

<td>qq:635976601</td>

<td> qq:635976601</td>

</tr>

<tr>

<td> qq:635976601</td>

<td> qq:635976601</td>

</tr>

</table>

</div>

<!--PrintEnd-->

<div class=”noprint>

<table>

<tr><td>http://hi.baidu.com/new/zhong635976601</td></tr>

</table>

</div>

 

這樣就可以輕鬆實現了,是不是很簡單啊.你是不是已經學會了呢?

不明白的可以留言問我