目前正在做瀏覽器端采用JS方式實現打印這么一個功能，JS打印實現的方法很多，但是兼容各個瀏覽器實現打印預覽的功能有些棘手，現將實現的內容及遇到的問題記錄下來，希望有大牛看到所提的問題后可以給予解答，在此感謝啦。
1.JS實現打印的方式
方式一：window.print()
window.print();會彈出打印對話框，打印的是window.document.body.innerHTML中的內容，下面是從網上摘到的一個局部打印的例子，該例子的不足是打印會修改頁面的內容。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>局部打印案例</title> <script type="text/javascript"> function doPrint() { bdhtml=window.document.body.innerHTML; sprnstr="<!--startprint-->"; eprnstr="<!--endprint-->"; prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); window.document.body.innerHTML=prnhtml; window.print(); } </script> </head> <body> <p>1不需要打印的地方</p> <p>2這里不要打印啊</p> <!--startprint--><!--注意要加上html里star和end的這兩個標記--> <h1>打印標題</h1> <p>打印內容~~</p> <!--endprint--> <button type="button" onclick="doPrint()">打印</button> <p>不打印的地方啊哈哈哈哈</p> <p>2</p> </body> </html> 方式二：使用html 標簽<object>引入Webbrowser控件
這種方式是其只兼容IE，其他瀏覽器不可使用，同時IE10以下的瀏覽器才可以使用，調用方式如下：
<body> <object id="WebBrowser" classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" width="0"> </object> </body> <script> WebBrowser.ExecWB(1,1) //打開 WebBrowser.ExecWB(2,1) //關閉現在所有的IE窗口，并打開一個新窗口 WebBrowser.ExecWB(4,1) //保存網頁 //--------------- 常用 --------------- WebBrowser.ExecWB(6,1) //打印 WebBrowser.ExecWB(7,1) //打印預覽 WebBrowser.ExecWB(8,1) //打印頁面設置 //------------------------------------- WebBrowser.ExecWB(10,1) //查看頁面屬性 WebBrowser.ExecWB(15,1) //撤銷 WebBrowser.ExecWB(17,1) //全選 WebBrowser.ExecWB(22,1) //刷新 WebBrowser.ExecWB(45,1) //關閉窗體無提示 </script>
這種方式優勢是在IE下可以彈出打印預覽，這是打印很人性化的功能，但是遺憾的是高版本的IE瀏覽器不支持WebBrowser了
方式三：采用document.execCommand(”print”)
該方式也兼容各個版本的瀏覽器，同window.print()一樣，其啟動的是打印對話框，chrome的打印對話框自帶預覽功能，但是IE、火狐僅僅只彈出打印設置對話框，沒有預覽功能。
方式四：采用JQuery插件
使用jQuery瀏覽插件可以很方便的進行局部打印，常用的插件有：
1)jquery.print.js 下載地址：https://github.com/DoersGuild/jQuery.print
2)jquery.print-preview.js 下載地址：https://github.com/etimbo/jquery-print-preview-plugin
這兩種方式使用都很簡單，1）通過$("#id").print(/*options*/);調用；2）通過$('#id').printArea(/*options*/); 其中的option可選項可以在下載地址下載下來后看示例代碼，一般options不用傳即可，示例代碼如下：
<html> <head> <meta http-equiv=Content-Type content="text/html; charset=utf-8"> <title>JQuery打印</title> <script type="text/javascript" src="./js/jquery-3.1.1.min.js"></script> <script language="javascript" src="./js/jquery.print.js"></script> </head> <body style='margin:0 auto;text-align:center;'> <button id='button_print' name='button_print' onclick="javascript:printit()>打印</button> <div id='ganburenmianbaio' class=WordSection1 style='width:750px;margin:0 auto;text-align:center;vertical-align: middle;'> </div> </body> <script language="javascript"> function printit(){ $("#ganburenmianbaio").print({iframe:true,prepend:'<br/>'}); } </script> </html> 方式五：采用瀏覽器打印第三方插件
該方式需要用戶瀏覽器安裝相關的第三方插件，用戶體驗不好，故在此不細述了。
2.打印預覽
chrome瀏覽器、win10自帶的IE瀏覽器 調用打印彈出的打印設置界面中包含打印預覽部分，故其通過上面的打印函數的調用即可實現。
IE9以后的版本、火狐不支持webbrowser控件了，JS調用不了瀏覽器的打印預覽的功能，我們只能用iframe模擬打印預覽的對話框，將需要打印的內容顯示在該對話框中，然后在調用打印的功能實現打印。
1）jquery打印預覽插件
jquery.print-preview.js 下載地址：https://github.com/etimbo/jquery-print-preview-plugin
其實現的效果如下圖（其自動的示例代碼）
2）webbrowser控件打印預覽
IE8及以下版本可以調用WebBrowser.ExecWB(7,1) 函數彈出瀏覽器的打印預覽對話框，采用該函數的好處是 用戶可以在打印預覽對話框中 調整頁邊距、頁眉、頁腳；
下面貼出的是設置頁邊距、頁眉、頁腳的JS代碼
//取得頁面打印設置的原參數數據 function PageSetup_temp(){ try { var Wsh=new ActiveXObject("WScript.Shell"); HKEY_Key="header"; //取得頁眉默認值 head = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key); HKEY_Key="footer"; //取得頁腳默認值 foot = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key); HKEY_Key="margin_bottom"; //取得下頁邊距 bottom = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key); HKEY_Key="margin_left"; //取得左頁邊距 left = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key); HKEY_Key="margin_right"; //取得右頁邊距 right = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key); HKEY_Key="margin_top"; //取得上頁邊距 top = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key); } catch(e){ //alert("不允許ActiveX控件"); } } //設置網頁打印的頁眉頁腳和頁邊距，注冊表里的單位是英寸，打印設置中是毫米，1英寸=25.4毫米 function PageSetup_Null(){ try { var Wsh=new ActiveXObject("WScript.Shell"); HKEY_Key="header"; //設置頁眉（為空） Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,""); HKEY_Key="footer"; //設置頁腳（為空） Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,""); HKEY_Key="margin_bottom"; //設置下頁邊距（0） Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.6"); HKEY_Key="margin_left"; //設置左頁邊距（0） Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.3"); HKEY_Key="margin_right"; //設置右頁邊距（0） Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.3"); HKEY_Key="margin_top"; //設置上頁邊距（8） Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.6"); } catch(e){ //alert("不允許ActiveX控件"); } } //設置網頁打印的頁眉頁腳和頁邊距為默認值 function PageSetup_Default(){ try { var Wsh=new ActiveXObject("WScript.Shell"); HKEY_Key="header"; HKEY_Key="header"; //還原頁眉 Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,head); HKEY_Key="footer"; //還原頁腳 Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,foot); HKEY_Key="margin_bottom"; //還原下頁邊距 Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,bottom); HKEY_Key="margin_left"; //還原左頁邊距 Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,left); HKEY_Key="margin_right"; //還原右頁邊距 Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,right); HKEY_Key="margin_top"; //還原上頁邊距 Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,top); } catch(e){ //alert("不允許ActiveX控件"); } }使用該函數，會彈出
通過網頁修改activex安全設置，添加信任站點，禁用該彈出窗口提示，代碼如下：
function activeXControl(){ try{ var WshShell=new ActiveXObject("WScript.Shell"); //添加信任站點(http://127.0.0.1) WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Internet Settings//ZoneMap//Ranges//Range100//",""); WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Internet Settings//ZoneMap//Ranges//Range100//:Range","127.0.0.1"); WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Internet Settings//ZoneMap//Ranges//Range100//http","2","REG_DWORD"); //修改IE ActiveX安全設置: 1本地Intranet區域 WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Internet Settings//Zones//1//1001","0","REG_DWORD"); WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Internet Settings//Zones//1//1004","0","REG_DWORD"); WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Internet Settings//Zones//1//1200","0","REG_DWORD"); WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Internet Settings//Zones//1//1201","0","REG_DWORD"); WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Internet Settings//Zones//1//1405","0","REG_DWORD"); WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Internet Settings//Zones//1//2201","0","REG_DWORD"); //修改IE ActiveX安全設置:2受信任的站點區域 WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Internet Settings//Zones//2//1001","0","REG_DWORD"); WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Internet Settings//Zones//2//1004","0","REG_DWORD"); WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Internet Settings//Zones//2//1200","0","REG_DWORD"); WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Internet Settings//Zones//2//1201","0","REG_DWORD"); WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Internet Settings//Zones//2//1405","0","REG_DWORD"); WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Internet Settings//Zones//2//2201","0","REG_DWORD"); //修改IE ActiveX安全設置:3Internet區域 WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Internet Settings//Zones//3//1001","0","REG_DWORD"); WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Internet Settings//Zones//3//1004","0","REG_DWORD"); WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Internet Settings//Zones//3//1200","0","REG_DWORD"); WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Internet Settings//Zones//3//1201","0","REG_DWORD"); WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Internet Settings//Zones//3//1405","0","REG_DWORD"); WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Windows//CurrentVersion//Internet Settings//Zones//3//2201","0","REG_DWORD"); //禁用Winxp彈出窗口阻止程序 WshShell.RegWrite("HKEY_CURRENT_USER//Software//Microsoft//Internet Explorer//New Windows//PopupMgr","no"); }catch(e){ //alert("不允許ActiveX控件"); } } 3.問題
1）網頁修改activex安全設置該段代碼也是必須在啟用ActiveX的條件下調用成功，是需要用戶在Internet的配置項中設置的(如下圖），如何才能自動啟用該插件？
2) chrome、火狐如何通過JS設置頁邊距、頁眉、頁腳?
3) IE高版本瀏覽器、火狐如何通過JS彈出瀏覽器自己的打印預覽?
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
