在HTML網頁上打印需要的內容,JS代碼


在HTML網頁上打印需要的內容,JS代碼

    通常在瀏覽網頁的時候,網頁上總是出現一些和內容無關的內容,在打印的時候,要是把整個網頁都打印下來,總會有些不方便。。。所以在有需要打印的網頁上稍微設置一下打印頁是很有必要的。。。

 

首先在head里面加入下面一段js代碼:

---------------------------------------------

<script language="javascript">
function preview(oper)
{
if (oper < 10){
bdhtml=window.document.body.innerHTML;/ /獲取當前頁的html代碼
sprnstr="<!--startprint"+oper+"-->";/ /設置打印開始區域
eprnstr="<!--endprint"+oper+"-->";/ /設置打印結束區域
prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); / /從開始代碼向后取html
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));/ /從結束代碼向前取html
window.document.body.innerHTML=prnhtml;
window.print();
window.document.body.innerHTML=bdhtml;
} else {
window.print();
}
}
</script>

---------------------------------------------

然后在所需要打印的代碼,用<!--startprint1-->和<!--endprint1-->包圍着,如下:

---------------------------------------------

<!--startprint1-->

<!--打印內容開始-->
<div id=sty>
    ...

</div>
<!--打印內容結束-->
<!--endprint1-->

---------------------------------------------

最后加上一個打印的按鈕

<input type=button name='button_export' title='打印1' onclick=preview(1) value=打印1>

--------------------------------------------- 

另外說明一下,在一個HTML頁面里面,可以設置多個打印區域,需要改動一下的就只是幾個數字就OK了。如:

在選擇第二個區域里面時用<!--startprint2--><!--endprint2-->包圍着,而按鈕自然也改成對應的preview(1)了。這樣第二區域的打印就完成。

 

還有一點,就是CSS樣式表的問題了,打印的效果是不包含背景的打印的,設置是注意一下。<style media="print">、<link media="print">的用法合理應用,media="print"是不被網頁所顯示的,只能在打印的效果上存在,可以設置出打印效果和在網頁上所顯示的不一樣。

 
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM