溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JS實(shí)現(xiàn)瀏覽器打印、打印預(yù)覽示例

發(fā)布時(shí)間：2020-09-28 01:45:08 來源：腳本之家 閱讀：878 作者：風(fēng)水月 欄目：web開發(fā)

目前正在做瀏覽器端采用JS方式實(shí)現(xiàn)打印這么一個(gè)功能，JS打印實(shí)現(xiàn)的方法很多，但是兼容各個(gè)瀏覽器實(shí)現(xiàn)打印預(yù)覽的功能有些棘手，現(xiàn)將實(shí)現(xiàn)的內(nèi)容及遇到的問題記錄下來，希望有大牛看到所提的問題后可以給予解答，在此感謝啦。

1.JS實(shí)現(xiàn)打印的方式

方式一：window.print()

window.print();會(huì)彈出打印對(duì)話框，打印的是window.document.body.innerHTML中的內(nèi)容，下面是從網(wǎng)上摘到的一個(gè)局部打印的例子，該例子的不足是打印會(huì)修改頁面的內(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)記--> 
<h2>打印標(biāo)題</h2> 
<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) //打開  
  WebBrowser.ExecWB(2,1) //關(guān)閉現(xiàn)在所有的IE窗口，并打開一個(gè)新窗口  
  WebBrowser.ExecWB(4,1) //保存網(wǎng)頁 
  //--------------- 常用 ---------------   
  WebBrowser.ExecWB(6,1) //打印  
  WebBrowser.ExecWB(7,1) //打印預(yù)覽  
  WebBrowser.ExecWB(8,1) //打印頁面設(shè)置  
  //-------------------------------------  
  WebBrowser.ExecWB(10,1) //查看頁面屬性  
  WebBrowser.ExecWB(15,1) //撤銷  
  WebBrowser.ExecWB(17,1) //全選  
  WebBrowser.ExecWB(22,1) //刷新  
  WebBrowser.ExecWB(45,1) //關(guān)閉窗體無提示 
</script>

這種方式優(yōu)勢(shì)是在IE下可以彈出打印預(yù)覽，這是打印很人性化的功能，但是遺憾的是高版本的IE瀏覽器不支持WebBrowser了

方式三：采用document.execCommand(”print”)

該方式也兼容各個(gè)版本的瀏覽器，同window.print()一樣，其啟動(dòng)的是打印對(duì)話框，chrome的打印對(duì)話框自帶預(yù)覽功能，但是IE、火狐僅僅只彈出打印設(shè)置對(duì)話框，沒有預(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）通過$("#id").print(/*options*/);調(diào)用；2）通過$('#id').printArea(/*options*/); 其中的option可選項(xiàng)可以在下載地址下載下來后看示例代碼，一般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>

方式五：采用瀏覽器打印第三方插件

該方式需要用戶瀏覽器安裝相關(guān)的第三方插件，用戶體驗(yàn)不好，故在此不細(xì)述了。

2.打印預(yù)覽

chrome瀏覽器、win10自帶的IE瀏覽器 調(diào)用打印彈出的打印設(shè)置界面中包含打印預(yù)覽部分，故其通過上面的打印函數(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)的示例代碼）

JS實(shí)現(xiàn)瀏覽器打印、打印預(yù)覽示例

2）webbrowser控件打印預(yù)覽

IE8及以下版本可以調(diào)用WebBrowser.ExecWB(7,1) 函數(shù)彈出瀏覽器的打印預(yù)覽對(duì)話框，采用該函數(shù)的好處是 用戶可以在打印預(yù)覽對(duì)話框中 調(diào)整頁邊距、頁眉、頁腳；

下面貼出的是設(shè)置頁邊距、頁眉、頁腳的JS代碼

//取得頁面打印設(shè)置的原參數(shù)數(shù)據(jù)   
function PageSetup_temp(){   
  try   
  {   
    var Wsh=new ActiveXObject("WScript.Shell");   
    HKEY_Key="header";   
    //取得頁眉默認(rèn)值   
    head = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);   
    HKEY_Key="footer";   
    //取得頁腳默認(rèn)值   
    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控件");   
  }   
}   
  
//設(shè)置網(wǎng)頁打印的頁眉頁腳和頁邊距，注冊(cè)表里的單位是英寸，打印設(shè)置中是毫米，1英寸=25.4毫米   
function PageSetup_Null(){   
  try   
  {   
    var Wsh=new ActiveXObject("WScript.Shell");   
    HKEY_Key="header";   
    //設(shè)置頁眉（為空）   
    Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");   
    HKEY_Key="footer";   
    //設(shè)置頁腳（為空）   
    Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");   
    HKEY_Key="margin_bottom";   
    //設(shè)置下頁邊距（0）   
    Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.6");   
    HKEY_Key="margin_left";   
    //設(shè)置左頁邊距（0）   
    Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.3");   
    HKEY_Key="margin_right";   
    //設(shè)置右頁邊距（0）   
    Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.3");   
    HKEY_Key="margin_top";   
    //設(shè)置上頁邊距（8）   
    Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.6");   
  }   
  catch(e){   
     //alert("不允許ActiveX控件");   
  }   
}   
 
//設(shè)置網(wǎng)頁打印的頁眉頁腳和頁邊距為默認(rèn)值   
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控件");   
  }   
}

  使用該函數(shù)，會(huì)彈出

JS實(shí)現(xiàn)瀏覽器打印、打印預(yù)覽示例

通過網(wǎng)頁修改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.問題

1）網(wǎng)頁修改activex安全設(shè)置該段代碼也是必須在啟用ActiveX的條件下調(diào)用成功，是需要用戶在Internet的配置項(xiàng)中設(shè)置的(如下圖），如何才能自動(dòng)啟用該插件？

JS實(shí)現(xiàn)瀏覽器打印、打印預(yù)覽示例

2) chrome、火狐如何通過JS設(shè)置頁邊距、頁眉、頁腳?

3) IE高版本瀏覽器、火狐如何通過JS彈出瀏覽器自己的打印預(yù)覽?

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手