1. 程式人生 > >在html頁面實現列印功能

在html頁面實現列印功能

首先在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 >
    ...
</div>
<!--列印內容結束-->

<!--endprint1-->

最後加上一個列印的按鈕:

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

在一個HTML頁面裡面,可以設定多個列印區域,需要改動一下的就只是幾個數字就OK了。如:
在選擇第二個區域裡面時用包圍著,而按鈕自然也改成對應的preview(1)了。這樣第二區域的列印就完成。

還有一點,就是CSS樣式表的問題了,列印的效果是不包含背景的列印的,設定是注意一下。