快捷導(dǎo)航

js控制web打印(局部打印)方法整理

更新時(shí)間：2013年05月29日 18:10:10 作者：

本文整理了一些常用的web打印及局部打印的方法以備不時(shí)之需，感興趣的朋友可以學(xué)習(xí)下

首先定義css樣式：

 
@media print { 
.noprint { display: none;color:green } 
} 

對(duì)于不想打印的內(nèi)容只用在標(biāo)簽中加上 class=noprint即可，打印的時(shí)候客戶也不會(huì)看到頁(yè)面任何變化。
打印時(shí)調(diào)用 window.print();

另外幾種js局部打印的方法：
移花接木：
打印的時(shí)候，把需要打印的內(nèi)容替換成整個(gè)body內(nèi)容（用戶會(huì)在打印的時(shí)候看到變化，客戶體驗(yàn)不太好）

復(fù)制代碼代碼如下:

 
function preview(oper) 
......{ 
if (oper < 10)......{ 
bdhtml=window.document.body.innerHTML;//獲取當(dāng)前頁(yè)的html代碼 
sprnstr="<!--startprint"+oper+"-->";//設(shè)置打印開(kāi)始區(qū)域 
eprnstr="<!--endprint"+oper+"-->";//設(shè)置打印結(jié)束區(qū)域 
prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //從開(kāi)始代碼向后取html 
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//從結(jié)束代碼向前取html 
window.document.body.innerHTML=prnhtml; 
window.print(); 
window.document.body.innerHTML=bdhtml; 
} else ......{ 
window.print(); 
} 
} 

使用很簡(jiǎn)單將頁(yè)面內(nèi)要打印的內(nèi)容加入中間XXXXX
再加個(gè)打印按紐 onclick=preview(1)
-----------------------------------------
WebBrowser是IE內(nèi)置的瀏覽器控件，無(wú)需用戶下載.（未實(shí)驗(yàn)）
一、WebBrowser控件

復(fù)制代碼代碼如下:

 
　　<object ID='WebBrowser' WIDTH=0 HEIGHT=0 CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object> 

二、WebBrowder控件的方法

復(fù)制代碼代碼如下:

 
//打印 
WebBrowser1.ExecWB(6,1); 
//打印設(shè)置 
WebBrowser1.ExecWB(8,1); 
//打印預(yù)覽 
WebBrowser1.ExecWB(7,1); 

關(guān)于這個(gè)組件還有其他的用法，列舉如下：
WebBrowser.ExecWB(1,1) 打開(kāi)
Web.ExecWB(2,1) 關(guān)閉現(xiàn)在所有的IE窗口，并打開(kāi)一個(gè)新窗口
Web.ExecWB(4,1) 保存網(wǎng)頁(yè)
Web.ExecWB(6,1) 打印
Web.ExecWB(7,1) 打印預(yù)覽
Web.ExecWB(8,1) 打印頁(yè)面設(shè)置
Web.ExecWB(10,1) 查看頁(yè)面屬性
Web.ExecWB(15,1) 好像是撤銷，有待確認(rèn)
Web.ExecWB(17,1) 全選
Web.ExecWB(22,1) 刷新
Web.ExecWB(45,1) 關(guān)閉窗體無(wú)提示
但是打印是會(huì)把整個(gè)頁(yè)面都打印出來(lái)的,頁(yè)面里面有什么東西就打印出來(lái),我們有時(shí)候只需要打印數(shù)據(jù)表格,這時(shí)我們就要寫一個(gè)樣式了:把不想打印的部份隱藏起來(lái)：
樣式內(nèi)容：

復(fù)制代碼代碼如下:

 
<style type="text/css" media=print> 
.noprint......{display : none } 
</style> 

然后使用樣式就可以：
<p class="noprint">不需要打印的地方</p>
代碼如下:

復(fù)制代碼代碼如下:

 
<script language="javascript"> 
function printsetup()......{ 
// 打印頁(yè)面設(shè)置 
wb.execwb(8,1); 
} 
function printpreview()......{ 
// 打印頁(yè)面預(yù)覽 
wb.execwb(7,1); 
} 
function printit() 
....{ 
if (confirm('確定打印嗎？')) ......{ 
wb.execwb(6,6) 
} 
} 
</script> 
<OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height=0 id=wb name=wb width=0></OBJECT> 
<input type=button name=button_print value="打印" class="noprint" onclick="javascript:printit()"> 
<input type=button name=button_setup value="打印頁(yè)面設(shè)置" class="noprint" onclick="javascript:printsetup();"> 
<input type=button name=button_show value="打印預(yù)覽" class="noprint" onclick="javascript:printpreview();"> 