萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> js 控制網頁打印大全

js 控制網頁打印大全

 普通打印(整頁打) 打印網頁內部分內容(自定義) 打印去掉/添加頁眉頁腳 使用外部控件/方法實現多功能打印 打印背景

以上為代碼控制

設置“頁面設置”實現打印參數設置(Window系統圖文版)

一、普通打印(整頁打)
這個不用多說,直接用

引用:window.print();

二、打印網頁內部分內容(自定義)

分三種方法實現
1、用css控制

引用:@media print
.a {display:block}
.b {display:hidden}
把你不想打印的部分class設為b
首先在網頁中添加:

引用:<OBJECT id="WebBrowser" height="0" width="0" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"
VIEWASTEXT>
</OBJECT>
然後就可以依次加入功能按鈕了:


引用:<input type="button" value="打印"> <input type="button" value="直接打印">
<input type="button" value="頁面設置">
<input type="button" value="打印預覽"> <INPUT type="button" value="關閉窗口" >
將這兩塊東西放到<center class=noprint></center>就不會打印這些按鈕了。當然要定義noprint了:
<style media="print">.Noprint { DISPLAY: none }</style>只要把不想打印的東西的css設置成noprint就可以了。
現在就實現了基本的web打印,需要注意的情況如下:
a. 必須將ie的internet選項的安全設置中對於沒有標記為安全的ActiveX控件進行...設置成提示或者啟用,否則會報錯,導致不可用。
b. 如果在vs.net編輯環境下編輯該頁面,它經常自動的給object添加多余的參數,有了這些東西,打印就會出錯,所以要記得最後保存的時候刪除它們。

2、用javascript打印固定標簽內的內容
a、在頁面的代碼頭部處加入JavaScript:


引用:<script language=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>


2、在頁面正文處加上<!--startprint-->與<!--endprint-->標識。

也就是在需要用戶打印保存的正文所對應的html處附加上。同時,如果采用小偷程序獲得遠程數據並需打印,可將此等數據置於該定義標簽之內即可。

3、截取內容部分已完成,現在加個“打印”的鏈接:

XML/HTML代碼
<a href="javascript:;" onClick="doPrint()">打印</a>

引用:
<script language="JavaScript">
var hkey_root,hkey_path,hkey_key
hkey_root="HKEY_CURRENT_USER"
hkey_path="SoftwareMicrosoftInternet ExplorerPageSetup"
//設置網頁打印的頁眉頁腳為空
function pagesetup_null(){
try{
var RegWsh = new ActiveXObject("WScript.Shell")
hkey_key="header"
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"")
hkey_key="footer"
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"")
}catch(e){}
}
//設置網頁打印的頁眉頁腳為默認值
function pagesetup_default(){
try{
var RegWsh = new ActiveXObject("WScript.Shell")
hkey_key="header"
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"&w&b頁碼,&p/&P")hkey_key="footer"
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"&u&b&d")
}catch(e){}
}
</script>
<input type="button" value="清空頁碼" onclick=pagesetup_null()>
<input type="button" value="恢復頁碼" onclick=pagesetup_default()>


復制出去,看下效果就可以了

(四)使用外部控件/方法實現多功能打印

1、IEWebBrowser組件

介紹
http://support.microsoft.com/default.aspx?scid=kb%3BEN-US%3BQ267240#top
http://support.microsoft.com/kb/q247671/#appliesto

代碼


引用:<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>
<input name=Button onClick=document.all.WebBrowser.ExecWB(1,1) type=button value=打開>
<input name=Button onClick=document.all.WebBrowser.ExecWB(2,1) type=button value=關閉所有>
<input name=Button onClick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存為>
<input name=Button onClick=document.all.WebBrowser.ExecWB(6,1) type=button value=打印>
<input name=Button onClick=document.all.WebBrowser.ExecWB(6,6) type=button value=直接打印>
<input name=Button onClick=document.all.WebBrowser.ExecWB(7,1) type=button value=打印預覽>
<input name=Button onClick=document.all.WebBrowser.ExecWB(8,1) type=button value=頁面設置>
<input name=Button onClick=document.all.WebBrowser.ExecWB(10,1) type=button value=屬性>
<input name=Button onClick=document.all.WebBrowser.ExecWB(17,1) type=button value=全選>
<input name=Button onClick=document.all.WebBrowser.ExecWB(22,1) type=button value=刷新>
<input name=Button onClick=document.all.WebBrowser.ExecWB(45,1) type=button value=關閉>

 

2、使用ScriptX.cab控件


1.下載ScriptX.cab控件

官網http://www.meadroid.com/scriptx/index.asp

2.使用object元素,修改codebase,classid的值

這裡調用控件ScriptX.cab

代碼


引用:
<OBJECT id="factory" style="DISPLAY: none" codeBase="${rootUrl}js/smsx.cab#VVersion=6,3,435,20" classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" viewastext></OBJECT>

這段代碼用來加載cab文件,clsid和codebase必須要和你下載的cab中的信息對應,否則組件會加載錯誤,這兩項其實不難找,只要你用winrar打開你下載的cab文件,然後找到擴展名是.inf的文件,然後打開之,就能看到了。

3.調用控件腳本

Print.js文件
代碼

引用:

function setPrintBase(headerText,footerText,rootUrl) {

// -- advanced features ,未曾使用過,有待確認。

//factory.printing.SetMarginMeasure(2); // measure margins in inches

//factory.SetPageRange(false, 1, 3);// need pages from 1 to 3

//factory.printing.printer = "HP DeskJet 870C";

//factory.printing.copies = 2;

//factory.printing.collate = true;

//factory.printing.paperSize = "A4";

//factory.printing.paperSource = "Manual feed"

var header = (headerText==null||headerText=="")?'默認頁眉':headerText;

var footer = (footerText==null||footerText=="")?'默認頁角':footerText;

factory.printing.header = "&b"+header+"&b" ;

factory.printing.footer = "&b"+footer;

factory.printing.portrait = true;

factory.printing.leftMargin =10.00;

factory.printing.topMargin =10.00;

factory.printing.rightMargin =10.00;

factory.printing.bottomMargin =10.00;

}


例子

引用:

<html>
<head>
<meta http-equiv="imagetoolbar" c>
<script language="javascript" src="print.js"></script>
<style media="print">
.Noprint {DISPLAY: none;}
</style>
<title>打印測試</title>
</head>
<OBJECT id="factory" style="DISPLAY: none" codeBase="smsx.cab#VVersion=6,3,435,20" classid="clsid:1663ed61-23e

copyright © 萬盛學電腦網 all rights reserved