JS實(shí)現(xiàn)瀏覽器打印、打印預(yù)覽示例
目前正在做瀏覽器端采用JS方式實(shí)現(xiàn)打印這么一個(gè)功能，JS打印實(shí)現(xiàn)的方法很多，但是兼容各個(gè)瀏覽器實(shí)現(xiàn)打印預(yù)覽的功能有些棘手，現(xiàn)將實(shí)現(xiàn)的內(nèi)容及遇到的問(wèn)題記錄下來(lái)，希望有大牛看到所提的問(wèn)題后可以給予解答，在此感謝啦。
1.JS實(shí)現(xiàn)打印的方式
方式一：window.print()
window.print();會(huì)彈出打印對(duì)話框，打印的是window.document.body.innerHTML中的內(nèi)容，下面是從網(wǎng)上摘到的一個(gè)局部打印的例子，該例子的不足是打印會(huì)修改頁(yè)面的內(nèi)容。
<!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的這兩個(gè)標(biāo)記-->
<h1>打印標(biāo)題</h1>
<p>打印內(nèi)容~~</p>
<!--endprint-->
<button type="button" onclick="doPrint()">打印</button>
<p>不打印的地方啊哈哈哈哈</p>
<p>2</p>
</body>
</html>
方式二：使用html 標(biāo)簽<object>引入Webbrowser控件
這種方式是其只兼容IE，其他瀏覽器不可使用，同時(shí)IE10以下的瀏覽器才可以使用，調(diào)用方式如下：
<body> <object id="WebBrowser" classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" width="0"> </object> </body> <script> WebBrowser.ExecWB(1,1) //打開(kāi) WebBrowser.ExecWB(2,1) //關(guān)閉現(xiàn)在所有的IE窗口，并打開(kāi)一個(gè)新窗口 WebBrowser.ExecWB(4,1) //保存網(wǎng)頁(yè) //--------------- 常用 --------------- WebBrowser.ExecWB(6,1) //打印 WebBrowser.ExecWB(7,1) //打印預(yù)覽 WebBrowser.ExecWB(8,1) //打印頁(yè)面設(shè)置 //------------------------------------- WebBrowser.ExecWB(10,1) //查看頁(yè)面屬性 WebBrowser.ExecWB(15,1) //撤銷(xiāo) WebBrowser.ExecWB(17,1) //全選 WebBrowser.ExecWB(22,1) //刷新 WebBrowser.ExecWB(45,1) //關(guān)閉窗體無(wú)提示 </script>
這種方式優(yōu)勢(shì)是在IE下可以彈出打印預(yù)覽，這是打印很人性化的功能，但是遺憾的是高版本的IE瀏覽器不支持WebBrowser了
方式三：采用document.execCommand(”print”)
該方式也兼容各個(gè)版本的瀏覽器，同window.print()一樣，其啟動(dòng)的是打印對(duì)話框，chrome的打印對(duì)話框自帶預(yù)覽功能，但是IE、火狐僅僅只彈出打印設(shè)置對(duì)話框，沒(méi)有預(yù)覽功能。
方式四：采用JQuery插件
使用jQuery瀏覽插件可以很方便的進(jìn)行局部打印，常用的插件有：
1)jquery.print.js 下載地址：https://github.com/DoersGuild/jQuery.print
2)jquery.print-preview.js 下載地址：https://github.com/etimbo/jquery-print-preview-plugin
這兩種方式使用都很簡(jiǎn)單，1）通過(guò)$("#id").print(/*options*/);調(diào)用；2）通過(guò)$('#id').printArea(/*options*/); 其中的option可選項(xiàng)可以在下載地址下載下來(lái)后看示例代碼，一般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>
方式五：采用瀏覽器打印第三方插件
該方式需要用戶(hù)瀏覽器安裝相關(guān)的第三方插件，用戶(hù)體驗(yàn)不好，故在此不細(xì)述了。
2.打印預(yù)覽
chrome瀏覽器、win10自帶的IE瀏覽器 調(diào)用打印彈出的打印設(shè)置界面中包含打印預(yù)覽部分，故其通過(guò)上面的打印函數(shù)的調(diào)用即可實(shí)現(xiàn)。
IE9以后的版本、火狐不支持webbrowser控件了，JS調(diào)用不了瀏覽器的打印預(yù)覽的功能，我們只能用iframe模擬打印預(yù)覽的對(duì)話框，將需要打印的內(nèi)容顯示在該對(duì)話框中，然后在調(diào)用打印的功能實(shí)現(xiàn)打印。
1）jquery打印預(yù)覽插件
jquery.print-preview.js 下載地址：https://github.com/etimbo/jquery-print-preview-plugin
其實(shí)現(xiàn)的效果如下圖（其自動(dòng)的示例代碼）
2）webbrowser控件打印預(yù)覽
IE8及以下版本可以調(diào)用WebBrowser.ExecWB(7,1) 函數(shù)彈出瀏覽器的打印預(yù)覽對(duì)話框，采用該函數(shù)的好處是 用戶(hù)可以在打印預(yù)覽對(duì)話框中 調(diào)整頁(yè)邊距、頁(yè)眉、頁(yè)腳；
下面貼出的是設(shè)置頁(yè)邊距、頁(yè)眉、頁(yè)腳的JS代碼
//取得頁(yè)面打印設(shè)置的原參數(shù)數(shù)據(jù)
function PageSetup_temp(){
try
{
var Wsh=new ActiveXObject("WScript.Shell");
HKEY_Key="header";
//取得頁(yè)眉默認(rèn)值
head = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);
HKEY_Key="footer";
//取得頁(yè)腳默認(rèn)值
foot = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);
HKEY_Key="margin_bottom";
//取得下頁(yè)邊距
bottom = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);
HKEY_Key="margin_left";
//取得左頁(yè)邊距
left = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);
HKEY_Key="margin_right";
//取得右頁(yè)邊距
right = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);
HKEY_Key="margin_top";
//取得上頁(yè)邊距
top = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);
}
catch(e){
//alert("不允許ActiveX控件");
}
}
//設(shè)置網(wǎng)頁(yè)打印的頁(yè)眉頁(yè)腳和頁(yè)邊距，注冊(cè)表里的單位是英寸，打印設(shè)置中是毫米，1英寸=25.4毫米
function PageSetup_Null(){
try
{
var Wsh=new ActiveXObject("WScript.Shell");
HKEY_Key="header";
//設(shè)置頁(yè)眉（為空）
Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");
HKEY_Key="footer";
//設(shè)置頁(yè)腳（為空）
Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");
HKEY_Key="margin_bottom";
//設(shè)置下頁(yè)邊距（0）
Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.6");
HKEY_Key="margin_left";
//設(shè)置左頁(yè)邊距（0）
Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.3");
HKEY_Key="margin_right";
//設(shè)置右頁(yè)邊距（0）
Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.3");
HKEY_Key="margin_top";
//設(shè)置上頁(yè)邊距（8）
Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.6");
}
catch(e){
//alert("不允許ActiveX控件");
}
}
//設(shè)置網(wǎng)頁(yè)打印的頁(yè)眉頁(yè)腳和頁(yè)邊距為默認(rèn)值
function PageSetup_Default(){
try
{
var Wsh=new ActiveXObject("WScript.Shell");
HKEY_Key="header";
HKEY_Key="header";
//還原頁(yè)眉
Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,head);
HKEY_Key="footer";
//還原頁(yè)腳
Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,foot);
HKEY_Key="margin_bottom";
//還原下頁(yè)邊距
Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,bottom);
HKEY_Key="margin_left";
//還原左頁(yè)邊距
Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,left);
HKEY_Key="margin_right";
//還原右頁(yè)邊距
Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,right);
HKEY_Key="margin_top";
//還原上頁(yè)邊距
Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,top);
}
catch(e){
//alert("不允許ActiveX控件");
}
}
使用該函數(shù)，會(huì)彈出
通過(guò)網(wǎng)頁(yè)修改activex安全設(shè)置，添加信任站點(diǎn)，禁用該彈出窗口提示，代碼如下：
function activeXControl(){
try{
var WshShell=new ActiveXObject("WScript.Shell");
//添加信任站點(diǎn)(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安全設(shè)置: 1本地Intranet區(qū)域
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安全設(shè)置:2受信任的站點(diǎn)區(qū)域
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安全設(shè)置:3Internet區(qū)域
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.問(wèn)題
1）網(wǎng)頁(yè)修改activex安全設(shè)置該段代碼也是必須在啟用ActiveX的條件下調(diào)用成功，是需要用戶(hù)在Internet的配置項(xiàng)中設(shè)置的(如下圖），如何才能自動(dòng)啟用該插件？
2) chrome、火狐如何通過(guò)JS設(shè)置頁(yè)邊距、頁(yè)眉、頁(yè)腳?
3) IE高版本瀏覽器、火狐如何通過(guò)JS彈出瀏覽器自己的打印預(yù)覽?
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js動(dòng)態(tài)添加input按鈕并給按鈕增加onclick的函數(shù)事件(帶參數(shù))完整實(shí)例
這篇文章主要介紹了js動(dòng)態(tài)添加input按鈕并給按鈕增加onclick的函數(shù)事件,結(jié)合完整實(shí)例形式分析了javascript頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2023-07-07
基于javascript實(shí)現(xiàn)精確到毫秒的倒計(jì)時(shí)限時(shí)搶購(gòu)
現(xiàn)如今做電商網(wǎng)站必不可少的一個(gè)效果就是限時(shí)搶購(gòu)，這也是各大電商網(wǎng)站的一種促銷(xiāo)手段。如何實(shí)現(xiàn)倒計(jì)時(shí)限時(shí)搶購(gòu)，本文為大家分享了javascript實(shí)現(xiàn)倒計(jì)時(shí)限時(shí)搶購(gòu)的的相關(guān)代碼，感興趣的小伙伴們可以參考一下2016-04-04
Django模板繼承 extend標(biāo)簽實(shí)例代碼詳解
這篇文章主要介紹了Django模板繼承 extend標(biāo)簽實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
JS實(shí)現(xiàn)點(diǎn)擊圖片在當(dāng)前頁(yè)面放大并可關(guān)閉的漂亮效果
點(diǎn)擊圖片在當(dāng)前頁(yè)面放大的漂亮效果實(shí)現(xiàn)方法有很多，在本文將為大家介紹下使用Lightbox JS是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過(guò)2013-10-10
undefined==null引發(fā)的兩者區(qū)別與聯(lián)系
undefined==null引發(fā)的兩者區(qū)別與聯(lián)系2007-12-12
對(duì)于js的一些常見(jiàn)事件的總結(jié)2008-12-12
純javascript實(shí)現(xiàn)選擇框的全選與反選功能
這篇文章主要介紹了純javascript實(shí)現(xiàn)選擇框的全選與反選 ,需要的朋友可以參考下2019-04-04
javascript 判斷頁(yè)面訪問(wèn)方式電腦或者移動(dòng)端
這篇文章主要介紹了 判斷頁(yè)面訪問(wèn)方式電腦或者移動(dòng)端的相關(guān)資料,這里提供了三種方法，需要的朋友可以參考下2016-09-09
這篇文章主要給大家介紹了關(guān)于webgl實(shí)現(xiàn)物體描邊效果的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用webgl具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
微信小程序?qū)崿F(xiàn)點(diǎn)擊生成隨機(jī)驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊生成隨機(jī)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09