在html頁面實現列印功能
阿新 • • 發佈:2019-02-18
首先在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樣式表的問題了,列印的效果是不包含背景的列印的,設定是注意一下。