Web系統頁面打印技術實現與分析

1 Web頁面打印概述 應用WEB化，不論對開發商，仍是對用戶來講，實在是一種很經濟的選擇，由於基於WEB的應用，客戶端的規則很簡單，容易學習，容易維護，容易發佈。在WEB系統中，打印的確是個煩人的問題。 要麼本身開發打印控件，若是項目時間緊，確定來不及。這對程序員來講，由於瀏覽器的侷限性，卻要面對不少挑戰。怎麼樣來進行基於WEB的套打，就是這麼一個令多數程序員頭痛不已的問題。 基於WEB的套打，難度在於要將瀏覽器中呈現的HTML，精確地打印到票據中，並且可以實現對分頁位置的控制。 本文將介紹經常使用的Web打印與套打方案，同時提供一些免費的打印控件，供你們學習參考。 2 經常使用Web頁面打印方案 2.1 瀏覽器的打印功能 這種方案的優點是不須要對瀏覽器做任何擴充，是最簡單的辦法，但問題也最多，如： 1. 不能精確分頁。 瀏覽器通常是根據用戶設置的頁面大小，web頁面的內容多少，來自行決定分頁位置，程序員很難控制。會有頁腳頁眉干擾。 2. 不能準確對齊邊邊距及打印文字。 3. 不能解決連續打印。 好比，不是僅打印一張票據，而是連續一次打印若干個票據。 2.2 使用PDF文件 用這種方式，就是從服務器端下載一個pdf文件流，在IE中用adobe插件打開，而後用adobe的打印菜單進行打印，雖然這種方案，也能實現精確套打，但須要下載adobe插件。這是國外報表工具常常推薦的一種打印方法，但在pdf不那麼普及的中國，這種方案不是最好選擇。 2.3 採用Applet方式 採用Applet方式，分頁或精確打印，均可以作到完美，但缺點也很明顯，表如今： 1. 安裝Applet成本巨大。須要下載十幾M的文件。 Applet自己可能並不大，但運行Applet所需的jre通常至少10幾M（jre1.4.2 ， 15.45M）。用戶須要極大的耐心，來進行打印。 2. 打印報表時，須要從新向服務器檢索數據，效率低。 由於Applet方案，通常採用html方式呈現數據，打印時Applet必須向服務器檢索同一張票據的數據，看上去，是打印了當前頁的票據，實際上，Applet根本不會用當前html頁的數據來打印，而是向服務器下載數據到Applet中來打印。也就是說，打印的話，必須兩次請求，一次html呈現，一次用來打印。 市場上java類的報表工具，通常推薦Applet方式來實現打印。 2.4 IEWebBrowser+Javascript 這實際上，是瀏覽器打印功能菜單的一種程序調用，與打印功能菜單沒什麼兩樣。分頁的問題仍然存在，只不過，可讓用戶不用去點菜單，直接在網頁中的一個按鈕，或一個連接裏面調用罷了。 2.5 利用word或excel來實現 先將須要打印的數據導入到word或者excel中，再利用word或者excel的打印功能來實現web打印。 2.6 使用第三方控件 這種方案就是下載一個控件，票據的數據再也不以html方式呈現，而是呈如今ActiveX中。這種方案的優勢是打印的精確度高，分頁的可控性好，但缺點也是很明顯的，嵌入ActiveX控件破壞了web應用的總體html風格，且這樣的控件比較大（通常超過1M），下載頗費時間）。市場上的非java類報表產品，通常都採用這種方案。 3 Web打印控件介紹 3.1 ScriptX ScriptX是一個叫MeadCo的國外公司的產品，它分爲基礎版（免費）和高級版（收費），基礎版能夠對 頁眉，頁腳，頁邊距，紙張方向進行設置。高級版有一些額外的功能，因爲是收費的，須要付費之後才能用到你係統中. 3.2 DLPrinter DLPrinter打印控件徹底免費，界面大方、使用簡單、但無簽名，支持打印預覽、直接打印，可設置頁眉、頁腳、頁邊距、打印份數、紙張大小等信息。遺憾的是做者不知道是什麼緣由，從2007年至今沒的更新。  做者博客：http://www.cnblogs.com/Yahong111/  下載地址：http://files.cnblogs.com/panshenglu/DLPrinter.rar 3.3 牆外打印控件 牆外打印控件(QWPrint)是一款小巧的打印輔助軟件，可以幫助衆多製做B/S類程序的程序員更加靈活的控制客戶端打印。  功能特色：  1) 小巧輕便，客戶端在第一次使用時只要下載一個ActiveX控件便可使用。  2) 控制多種打印設置。程序員能夠經過控件進行多項設置，包括設置打紙的頁邊距，頁眉頁腳，紙張大小等參數。  3) 精確控制打印。能夠方便實現web下的套打操做。  做者博客：http://www.xwangye.com/  下載地址：http://files.cnblogs.com/panshenglu/牆外打印控件.rar 3.4 Lodop 對於這個打印控件，用一個詞來形容：強大！不只調用方便，並且功能比你想像中要強大得多。  更多介紹你們到做者博客詳細瞭解。  做者博客：http://blog.sina.com.cn/caoyanqingwebsite/  下載地址：http://files.cnblogs.com/panshenglu/lodop4.0.zip 3.5 WebPrint（商業） webprint使用簡單,靈活.能知足絕大多數頁面打印的須要.它內含一個在vc7.0上開發的ATL小控件（只有74k）,這個小控件主要實現對IE瀏覽器中文檔打印格式的控制，能夠定製打印紙型，紙張來源，打印方向，設置表頭，表尾，表格，表格列寬，打印預覽，分頁，縮放等等用戶常常關心的屬性。 webprint使用戶經過腳本能夠控制自定義紙張，打印方向，頁邊距等等屬性達到定製打印的目的，這些定製屬性的設置不會改變IE瀏覽器的默認打印機屬性。也能夠經過服務器端的頁面調用WebPrint生成客戶端的頁面達到設置打印參數的目的。 技術特色： 1) 基於表格的頁面打印解決方案 2) 採用了VC7.0開發的設置打印參數的小組件(僅75K)，實現打印紙張，方向，頁邊距等等的自定義。 3) 採用了DHTML, 不只實現分頁，換頁從新打印標題，表頭表尾等等，並且還實現了精確的放縮功能。 4) 由於將數據接口層定在標準的HTML元素這一層,因此適合全部在IE下運行的互聯網程序,包括ASP JSP PHP和VS.net等等.. 5) 使用簡單方便,須要學習的東西不多. 6) 無須爲webprint從新組織要打印的數據和樣式,直接將顯示的頁面傳入webprint便可實現數據和樣式的打印. 7) 支持橫向分頁,分頁時固定列重複打印. 8) 能夠動態改變每頁的標題. 9) 支持批打印,即一次打印多個打印做業. 10) 在同一個頁面上能夠打印多個報表. 11) 支持大數據量的打印. 12) 能夠設置打印到某些行時強行分頁. 13) 支持圖片的打印. 14) 能夠導出爲Excel文件。 4 Web頁面打印應用實例 4.1 Javascript自帶函數 <a href="javascript:window.print();">打印</a> 4.2 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=關閉> 4.3 經過Excel實現頁面打印 將網頁中數據導入excel中的方法有不少，這裏先介紹一種，利用ActiveX控件的方式，即 Excel.Application, 這個控件是MS爲excel提供的編程接口，在不少種編程語言種均可以經過該接口來操縱excel表格。 下面用javascript腳原本實現一個簡單的例子。 < script language="javascript"> function ExcelPrint(){ var excelApp;//存放Excel對象 var excelBook;//存放Excel工件簿文件 var excelSheet;//存放Excel活動工做表 try{ excelApp = new ActiveXObject("Excel. Application");//建立Excel對象} catch(e){ alert("請啓用ActiveX控件設置！"); return;} excelBook = excelApp.Workbooks.Add();//建立Excel工做簿文件 excelSheet = excelBook.ActiveSheet;//激活Excel工做表 var rowLen = printTable.rows.length;//table對象的行數 for (var i=0;i< rowLen;i++){ var colLen = printTable.rows(i).cells.length;//table對象的列數 for (var j=0;j< colLen;j++)//爲Excel表的單元格賦值 excelSheet.Cells(i+1,j+1).value = printTable.rows(i).cells(j).innerText;} //將表格中的每一個單元格的innerText導入到excel的單元格中 excelApp.Visible = true;//設置Excel對象可見} excelSheet.PrintOut(); //打印工做表 excelBook.Close(true); //關閉文檔 excelApp.Quit(); //結束excel對象 excelApp=null; //釋放excel對象 < /script>  注意：運行該程序的前提是 IE要容許對沒有標記爲安全的Activex控件進行初始化和腳本運行。設置方法以下： 打開控制面板→Internet選項→安全性→自定義級別→對沒有標記爲安全的ActiveX控件進行初始化和腳本運行→選中啓用，這樣咱們的程序就能夠 運行了。若是沒有啓用該ActiveX控件設置，那麼程序在執行建立Excel對象時會拋出一個異常，這時能夠經過catch()語句來捕獲這個異常，並 且作出相應的處理。 運行該程序必須客戶端安裝了MS EXCEL，不然Activex驅動不了。 4.4 使用ScriptX控件 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. 調用控件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; } 4. 應用實例 <html> <head> <meta http-equiv="imagetoolbar" content="no"> <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="打印" onclick="factory.printing.Print(true)">  <input type=button value="頁面設置" onclick="factory.printing.PageSetup()">  <input type=button value="打印預覽" onclick="factory.printing.Preview()">  <input type="button" value="關閉" onclick="window.close();"> </center> <center> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td align="center"><b>內容</b></td></tr> </table> </center> </body> </html> 5 Web頁面打印技巧 5.1 隱藏打印的Web元素 <html><head><title>web打印去掉頁眉頁腳，以及不想打印出的頁面元素</title> <meta http-equiv=content-type content="text/html; charset=gb2312"> <script language=javascript> function printpr() {//預覽函數 document.all("qingkongyema").click();//打印以前去掉頁眉，頁腳 document.all("dayindiv").style.display="none"; //打印以前先隱藏不想打印輸出的元素（此例中隱藏「打印」和「打印預覽」兩個按鈕） var olecmdid = 7; var prompt = 1;  var webbrowser = '<object id="webbrowser1" width=0 height=0 classid="clsid:8856f961-340a-11d0-a96b-00c04fd705a2"></object>'; document.body.insertadjacenthtml('beforeend', webbrowser);  webbrowser1.execwb(olecmdid, prompt); webbrowser1.outerhtml = ""; document.all("dayindiv").style.display="";//打印以後將該元素顯示出來（顯示出「打印」和「打印預覽」兩個按鈕，方便別人下次打印） }  function printture() { //打印函數 document.all('qingkongyema').click();//同上 document.all("dayindiv").style.display="none";//同上 window.print(); document.all("dayindiv").style.display=""; } function dopage(){ layloading.style.display = "none";//同上 } </script> <script language="vbscript"> dim hkey_root,hkey_path,hkey_key hkey_root="hkey_current_user" hkey_path="\software\microsoft\internet explorer\pagesetup" '//設置網頁打印的頁眉頁腳爲空 function pagesetup_null() on error resume next set regwsh = createobject("wscript.shell") hkey_key="\header"  regwsh.regwrite hkey_root+hkey_path+hkey_key,"" hkey_key="\footer" regwsh.regwrite hkey_root+hkey_path+hkey_key,"" end function '//設置網頁打印的頁眉頁腳爲默認值 function pagesetup_default() on error resume next set regwsh = createobject("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" end function </script> </head> <body background="images/background_01.gif" leftmargin=0  topmargin=0 rightmargin=0 bottommargin=0 style="background-position: center 50%"> <div align=center> 你但願打印的內容.......... </div> <div align="center" id="dayindiv" name="dayindiv"><input type="button" class="tab" value="打印" onclick="printture();">  <input type="button" class="tab" value="打印預覽" onclick="printpr();"> <input type="hidden" name="qingkongyema" id="qingkongyema" class="tab" value="清空頁碼" onclick="pagesetup_null()">  <input type="hidden" class="tab" value="恢復頁碼" onclick="pagesetup_default()"> </div> </body> </html> 5.2 實現簡單的頁面局部打印 5.2.1 Javascript實現 function preview(oper) ......{ if (oper < 10)......{ bdhtml=window.document.body.innerHTML;//獲取當前頁的html代碼 sprnstr="<!--startprint"+oper+"-->";//設置打印開始區域 eprnstr="<!--endprint"+oper+"-->";//設置打印結束區域 prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //從開始代碼向後取html prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//從結束代碼向前取html window.document.body.innerHTML=prnhtml; window.print(); window.document.body.innerHTML=bdhtml; } else ......{ window.print(); } } 使用很簡單 將頁面內要打印的內容加入中間<!--startprint1-->XXXXX<!--endprint1--> 再加個打印按紐 onclick=preview(1) 5.2.2 WebBrowser實現 1. WebBrowser控件  <object ID='WebBrowser' WIDTH=0 HEIGHT=0 CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object>  2. WebBrowder控件的方法  //打印  WebBrowser1.ExecWB(6,1);  //打印設置  WebBrowser1.ExecWB(8,1);  //打印預覽  WebBrowser1.ExecWB(7,1);  關於這個組件還有其餘的用法，列舉以下：  WebBrowser.ExecWB(1,1) 打開  Web.ExecWB(2,1) 關閉如今全部的IE窗口，並打開一個新窗口  Web.ExecWB(4,1) 保存網頁  Web.ExecWB(6,1) 打印  Web.ExecWB(7,1) 打印預覽  Web.ExecWB(8,1) 打印頁面設置  Web.ExecWB(10,1) 查看頁面屬性  Web.ExecWB(15,1) 好像是撤銷，有待確認  Web.ExecWB(17,1) 全選  Web.ExecWB(22,1) 刷新  Web.ExecWB(45,1) 關閉窗體無提示  可是打印是會把整個頁面都打印出來的,頁面裏面有什麼東西就打印出來,咱們有時候只須要打印數據表格,這時咱們就要寫一個樣式了:把不想打印的部份隱藏起來： 樣式內容： <style type="text/css" media=print> .noprint......{display : none } </style> 而後使用樣式就能夠： <p class="noprint">不須要打印的地方</p> 代碼以下: <script language="javascript">  function printsetup()......{  // 打印頁面設置  wb.execwb(8,1);  }  function printpreview()......{  // 打印頁面預覽  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="打印頁面設置" class="noprint" onclick="javascript:printsetup();">  <input type=button name=button_show value="打印預覽" class="noprint" onclick="javascript:printpreview();"> 5.3 禁止出現頁眉頁腳 <HTML><HEAD> <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> </HEAD> <BODY><br/><br/><br/><br/><br/><br/><p align=center> <input type="button" value="清空頁碼" onclick=pagesetup_null()> <input type="button" value="恢復頁碼" onclick=pagesetup_default()><br/> </p></BODY></HTML>