JS 網頁打印解決方案


  這些日子真是太忙了,項目太多了公司總是加班,而且這些項目中好多都用到的打印,所以學習了一段時間js的打印。

其實原來只是用到了簡單的功能,現在要深入的了解才發現原來ie的網頁打印也是如此的強大。

以下是我在網上摘錄的js打印方法。

Javascript網頁打印大全

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

以上為代碼控制

設置“頁面設置”實現打印參數設置(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="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"
//設置網頁打印的頁眉頁腳為空
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-23eb-11d2-b92f-008048fdd814" viewastext></OBJECT>  
  
<script defer>  
function window.onload() {      
setPrintBase('頁眉','頁腳');  
}  
</script>  
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">  
<center class="Noprint">  
<input type=button value="打印" >    
<input type=button value="頁面設置" >    
<input type=button value="打印預覽" >              
<input type="button" value="關閉" >  
</center>  
  <center>  
      <table width="100%" border="0" cellpadding="0" cellspacing="0">  
          <tr><td align="center"><b>內容</b></td></tr>  
      </table>  
    </center>  
</body>  
</html> 

 

 

(五)打印背景
默認情況下,使用IE瀏覽器打印網頁時,不打印網頁背景。如果需要打印網頁背景,可以采用如下的方法設置:
  1. 啟動IE瀏覽器。
  2. 選擇【工具】菜單中的【Internet選項】菜單項,打開【Internet選項】對話框。
  3. 打開【高級】選項卡,在【打印】選區中選擇【打印背景顏色和圖像】復選框。
  4. 單擊【確定】按鈕,關閉對話框。

(六)如何用IE打印網頁

 


    Internet Explorer(簡稱IE)5.0以上版本強大的打印及打印預覽功能。本文就向大家介紹如何用IE來打印網頁。(誰?誰?誰在扔西紅柿?下面一片噓聲:這還用得着你講呀?!)咳咳咳,是的是的,在IE中打印網頁實在是太簡單不過了。只需點一下工具欄上“打印”按鈕就可將當前網頁打印出來。如下圖所示:


    不過,你這樣打出來的效果怎么樣呢?我就不敢說了。我今天要和大家講的就是一些打印方面的設置參數。如何大家把這些參數設置好,你就會發現IE的打印功能快追得上Word了。今后你打印網頁時就可以想怎么打就怎么打了。好,閑話少說,現在就跟我來一起看看怎么樣設置IE的打印參數。
    我們以下圖要打印的學生名單(《學生學籍管理系統MX》查詢結果網頁)為例,講解如何設置這些打印參數:


    假如我們直接點工具欄的“打印”按鈕或點“文件”菜單中的“打印”進行打印這個網頁的話,就會打印出很多不必要的信息。所以在打印前我們應先用IE5新增的“打印預覽”功能查看當前網頁的實際打印效果。如下圖所示:


    在如下圖所示的“打印預覽”對話框中,我們可以看到,網頁標題、網頁的URL地址及打印日期等我們所不需要的信息也被打印出來了。而頁碼又在右上角,能不能把它移到其他位置(如我們常見的右下角)呢?

 


    能不能按照我們所想要的樣式來打印網頁呢?當然可以。一切就在“頁面設置”中。


    彈出如下圖所示的“頁面設置”對話框,所有的秘密都在這里!


    原來,IE自動給我們在頁眉和頁腳處加上了這些不必要的打印信息。如果我們不想要任何頁眉和頁腳的話,直接刪除它們就行了。:-)大部分時候我都是這樣做的。但如果你想自定義頁眉和頁腳的時候,該怎么做呢?上面的那些“&w&b&p”等等究竟表示什么意思呀?給你個表格就知道了。 含義  
&w 網頁標題 
&u 網頁地址 (URL) 
&d 短日期格式(由“控制面板”中的“區域設置”指定) 
&D 長日期格式(由“控制面板”中的“區域設置”指定) 
&t 由“控制面板”中的“區域設置”指定的時間格式 
&T 24 小時時間格式 
&p 當前頁碼 
&P 總頁數       
&b 文本右對齊(請把要右對齊的文字放在“&b”之后) 
&b&b 文字居中(請把要居中的文字放在“&b”和“&b” 之間) 
&& 單個 & 號 (&) 
注:1、這些符號可以與文字組合使用,如本教程中的“頁碼,&p/&P”。 
    2、頁眉和頁腳默認是左對齊的,所以IE只提供了右對齊和居中的設置符號。
    3、推薦給大家一種設置方法:頁眉為空,頁腳設為“&b第 &p 頁 / 共 &P 頁&b”,打印效果為在頁腳居中顯示“第 1 頁 / 共 4 頁”的效果。
    知道了上面的知識,你就可以打印了。但有時你會發現,網頁中的一些圖像在打印時不見了。Why?為什么會這樣?別着急,IE的默認設置是不打印網頁的背景顏色和圖像的。您只需進入IE的Internet選項將它選中(打上勾)就行了。具體操作方法是:點IE的主菜單中的“工具”——“Internet選項”——再在彈出的對話框中占擊“高級”選項卡,找到“打印背景顏色和圖像”一項。如下圖所示:

 

    然后將上圖中紅色圈住的選項打上勾,再點“確定”就OK了。

    至此,我們就完成了對IE的打印設置。接下來,只要我們沒有關閉IE,我們就可以一直使用上述設置(最后一項“打印背景顏色和圖像”的更改始終有效)進行打印。打印前一般先進行打印預覽,效果滿意后再開始打印。

 

3、windows自帶功能
按住鼠標的左鍵,將你想要打印的內容選定,然后單擊右鍵選擇“打印”,在彈出的打印對話框中的“頁面范圍”中選擇“選定范圍”就可以只打印你選擇的內容了。


免責聲明!

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



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