很多時候,我們在做系統的時候要做打印功能,打印在js中其實很簡單,不過這個很簡單的代碼並不能滿足我們的特定需求,比如我們需要打印的表單在很多文字的中間,或者文字中包含一些廣告或者圖片什么的,這就很難用:window.print();這時,我們就要分區域的打印,將需要打印的內容提取出來讓打印機知道,而不是一股腦的全部打印!
下面是兩種實現的方法:
第一種:區域划分法。將要打印的部分用特殊的字符標記起來進行打印。這樣下來還是有頁眉和頁腳,可以寫去頁眉頁腳的方法放進去。JS 實現簡單的頁面局部打印
1 function preview(oper) { 2 if (oper < 10){ 3 bdhtml=window.document.body.innerHTML;//獲取當前頁的html代碼 4 sprnstr="<!--startprint"+oper+"-->";//設置打印開始區域 5 eprnstr="<!--endprint"+oper+"-->";//設置打印結束區域 6 prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //從開始代碼向后取html 7 8 prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//從結束代碼向前取html 9 window.document.body.innerHTML=prnhtml; 10 window.print(); 11 window.document.body.innerHTML=bdhtml; 12 13 } 14 else{ 15 window.print(); 16 } 17 18 }
使用時,將頁面內要打印的內容加入中間<!--startprint1-->XXXXX<!--endprint1-->,再加個打印按紐 onclick=preview(1)
第二中:組件法。WebBrowser是IE內置的瀏覽器控件,無需用戶下載。
WebBrowser控件 :
<object ID='wb' WIDTH=0 HEIGHT=0 CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object> //放進<body>中
WebBrowder控件的方法 :
1 //打印 2 wb.ExecWB(6,1); 3 //打印設置 4 wb.ExecWB(8,1); 5 //打印預覽 6 wb.ExecWB(7,1);
關於這個組件還有其他的用法,列舉如下:
wb.ExecWB(1,1) 打開
wb.ExecWB(2,1) 關閉現在所有的IE窗口,並打開一個新窗口
wb.ExecWB(4,1) 保存網頁
wb.ExecWB(6,1) 打印
wb.ExecWB(7,1) 打印預覽
wb.ExecWB(8,1) 打印頁面設置
wb.ExecWB(10,1) 查看頁面屬性
wb.ExecWB(15,1) 好像是撤銷,有待確認
wb.ExecWB(17,1) 全選
wb.ExecWB(22,1) 刷新
wb.ExecWB(45,1) 關閉窗體無提示
但是打印是會把整個頁面都打印出來的,頁面里面有什么東西就打印出來,我們有時候只需要打印數據表格,這時我們就要寫一個樣式了。把不想打印的部份隱藏起來:
樣式內容:
<style type="text/css" media=print> .noprint...{display : none } </style>
然后使用樣式就可以: <p class="noprint">不需要打印的地方</p> ,代碼如下:
1 <script language="javascript"> 2 function printsetup()...{ 3 // 打印頁面設置 4 wb.execwb(8,1); 5 } 6 function printpreview()...{ 7 // 打印頁面預覽 8 9 wb.execwb(7,1); 10 11 } 12 13 function printit() 14 ...{ 15 if (confirm('確定打印嗎?')) ...{ 16 wb.execwb(6,6) 17 } 18 } 19 </script>
1 <OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height=0 id=wb name=wb width=0></OBJECT> 2 <input type=button name=button_print value="打印" class="noprint" onclick="javascript:printit()"> 3 <input type=button name=button_setup value="打印頁面設置" class="noprint" onclick="javascript:printsetup();"> 4 <input type=button name=button_show value="打印預覽" class="noprint" onclick="javascript:printpreview();">
下面是去除頁腳頁眉的js代碼,代碼如下:
1 <script> 2 var HKEY_Root,HKEY_Path,HKEY_Key; 3 HKEY_Root="HKEY_CURRENT_USER"; 4 HKEY_Path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"; 5 //設置網頁打印的頁眉頁腳為空 6 function PageSetup_Null() 7 { 8 try 9 { 10 var Wsh=new ActiveXObject("WScript.Shell"); 11 HKEY_Key="header"; 12 Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,""); 13 HKEY_Key="footer"; 14 Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,""); 15 } 16 catch(e) 17 { 18 19 } 20 } 21 //設置網頁打印的頁眉頁腳為默認值 22 function PageSetup_Default() 23 { 24 try 25 { 26 var Wsh=new ActiveXObject("WScript.Shell"); 27 HKEY_Key="header"; 28 Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&w&b頁碼,&p/&P"); 29 HKEY_Key="footer"; 30 Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&u&b&d"); 31 } 32 catch(e) 33 {} 34 } 35 36 </script>
注意有可能執行時,會出現沒有效果的錯誤,這時原因是可能你的瀏覽器限制了active對象的創建,只要取消限制就好了,取消方法如下:打開你的ie瀏覽器internet選項—— 安全—— 自定義級別—— 把對沒有標記為安全的activex控件進行初始化和腳本運行設置為啟用,這樣在加打印按鈕的時候,只要加個事件觸發就好了。
