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() { 

if (confirm('確定打印嗎?')){
try{
print.portrait = false ;//橫向打印
}catch(e){
//alert("不支持此方法");
}

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彈出瀏覽器自己的打印預覽?


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM