window.print 頁面列印
阿新 • • 發佈：2018-12-23
window.print();
window.print() 實際上，是瀏覽器列印功能選單的一種程式呼叫。與點選列印功能選單一樣，不能精確分頁，不能設定紙型，套打的問題更加無從談起，只不過，可以讓使用者不用去點選單，直接點選網頁中的一個按鈕，或一個連結裡面呼叫罷了。事實上，很多使用者都是採用這種方式列印，但是這種方式最致命的缺點是不能設定列印引數，比如紙型，頁邊距，選擇印表機等等。
方法一：
需要指出的是這種方法提供一個列印前和列印後的事件onbeforeprint、onafterprint。可以在列印前的時候重新編輯一些格式，專門送去列印，列印後又處理回來。
注意：media的瀏覽器相容問題。http://www.w3cschool.cc/cssref/css3-pr-mediaquery.html
綜上 還是第三種最靠譜
window.print() 實際上，是瀏覽器列印功能選單的一種程式呼叫。與點選列印功能選單一樣，不能精確分頁，不能設定紙型，套打的問題更加無從談起，只不過，可以讓使用者不用去點選單，直接點選網頁中的一個按鈕，或一個連結裡面呼叫罷了。事實上，很多使用者都是採用這種方式列印，但是這種方式最致命的缺點是不能設定列印引數，比如紙型，頁邊距，選擇印表機等等。
方法一：
需要指出的是這種方法提供一個列印前和列印後的事件onbeforeprint、onafterprint。可以在列印前的時候重新編輯一些格式，專門送去列印，列印後又處理回來。
function window.onbeforeprint(){ //將一些不需要列印的隱藏 } function window.onafterprint(){ //放開隱藏的元素 }
通過這兩個方法，就可以實現頁面的部分列印。上述方法只有火狐和ie支援。
方法二：
呼叫window.print()時，可以利用css來控制頁面中的東西是否顯示
<style>
@media print{
.noprint{
display:none
}
}
</style><table width="757" height="174" border="0" align="center" cellpadding="0" cellspacing="0"> <tr class="noprint"> <td height="133" align="center" valign="top"> <img src="Images/top.jpg" width="757" height="133"></td> </tr> </table>
注意：media的瀏覽器相容問題。http://www.w3cschool.cc/cssref/css3-pr-mediaquery.html
方法三：
點列印按鈕彈出新視窗，把需要列印的內容顯示到新視窗中，在新視窗中呼叫window.print()方法，然後自動關閉新視窗。如果要列印的頁面排版和原web頁面相差很大，採用此種方法。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>列印測完</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> #oDiv2 div{width: 100px;height: 100px;border:1px solid #c50000;} </style> </head> <body> <div>aaa</div> <div id='oDiv2'><div>bbb</div></div> <div>ccc</div> <input type="button" value="列印" id="js_print" /> <script> var oPrintBtn = document.getElementById("js_print"); var oDiv2 = document.getElementById("oDiv2"); oPrintBtn.onclick=function(){ var oPop = window.open('','oPop'); var str = '<!DOCTYPE html>' str +='<html>' str +='<head>' str +='<meta charset="utf-8">' str +='<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">' str+='<style>'; str+='#oDiv2 div{width: 100px;height: 100px;border:1px solid #c50000;}'; str+='</style>'; str +='</head>' str +='<body>' str +="<div id='oDiv2'><div>bbb</div></div>"; str +='</body>' str +='</html>' oPop.document.write(str); oPop.print(); oPop.close(); } </script> </body> </html>
綜上 還是第三種最靠譜