Web系統(tǒng)頁面打印技術(shù)實現(xiàn)與分析

1、Web系統(tǒng)頁面打印技術(shù)實現(xiàn)與分析1 Web頁面打印概述應(yīng)用WEB化，不論對開發(fā)商，還是對用戶來說，實在是一種很經(jīng)濟的選擇，因為基于WEB的應(yīng)用，客戶端的規(guī)則很簡單，容易學(xué)習(xí)，容易維護，容易發(fā)布。在WEB系統(tǒng)中，打印的確是個煩人的問題。 要么自己開發(fā)打印控件，如果項目時間緊，肯定來不及。這對程序員來說，因為瀏覽器的局限性，卻要面對很多挑戰(zhàn)。怎么樣來進行基于WEB的套打，就是這么一個令多數(shù)程序員頭痛不已的問題。 基于WEB的套打，難度在于要將瀏覽器中呈現(xiàn)的HTML，精確地打印到票據(jù)中，而且能夠?qū)崿F(xiàn)對分頁位置的控制。本文將介紹常用的Web打印與套打方案，同時提供一些免費的打印控件，供大家學(xué)習(xí)參考。2

2、 常用Web頁面打印方案2.1 瀏覽器的打印功能這種方案的優(yōu)勢是不需要對瀏覽器作任何擴充，是最簡單的辦法，但問題也最多，如：1. 不能精確分頁。瀏覽器一般是根據(jù)用戶設(shè)置的頁面大小，web頁面的內(nèi)容多少，來自行決定分頁位置，程序員很難控制。會有頁腳頁眉干擾。2. 不能準(zhǔn)確對齊邊邊距及打印文字。3. 不能解決連續(xù)打印。比如，不是僅打印一張票據(jù)，而是連續(xù)一次打印若干個票據(jù)。2.2 使用PDF文件用這種方式，就是從服務(wù)器端下載一個pdf文件流，在IE中用adobe插件打開，然后用adobe的打印菜單進行打印，雖然這種方案，也能實現(xiàn)精確套打，但需要下載adobe插件。這是國外報表工具經(jīng)常推薦的一種打印方

3、法，但在pdf不那么普及的中國，這種方案不是最好選擇。2.3 采用Applet方式采用Applet方式，分頁或精確打印，都可以做到完美，但缺點也很明顯，表現(xiàn)在：1. 安裝Applet成本巨大。需要下載十幾M的文件。Applet本身可能并不大，但運行Applet所需的jre一般至少10幾M（jre1.4.2 ， 15.45M）。用戶需要極大的耐心，來進行打印。2. 打印報表時，需要重新向服務(wù)器檢索數(shù)據(jù)，效率低。因為Applet方案，一般采用html方式呈現(xiàn)數(shù)據(jù)，打印時Applet必須向服務(wù)器檢索同一張票據(jù)的數(shù)據(jù)，看上去，是打印了當(dāng)前頁的票據(jù)，實際上，Applet根本不會用當(dāng)前html頁的數(shù)據(jù)來打

4、印，而是向服務(wù)器下載數(shù)據(jù)到Applet中來打印。也就是說，打印的話，必須兩次請求，一次html呈現(xiàn)，一次用來打印。市場上java類的報表工具，一般推薦Applet方式來實現(xiàn)打印。2.4 IEWebBrowser+Javascript這實際上，是瀏覽器打印功能菜單的一種程序調(diào)用，與打印功能菜單沒什么兩樣。分頁的問題仍然存在，只不過，可以讓用戶不用去點菜單，直接在網(wǎng)頁中的一個按鈕，或一個鏈接里面調(diào)用罷了。2.5 利用word或excel來實現(xiàn)先將需要打印的數(shù)據(jù)導(dǎo)入到word或者excel中，再利用word或者excel的打印功能來實現(xiàn)web打印。2.6 使用第三方控件這種方案就是下載一個控件，票據(jù)

5、的數(shù)據(jù)不再以html方式呈現(xiàn)，而是呈現(xiàn)在ActiveX中。這種方案的優(yōu)點是打印的精確度高，分頁的可控性好，但缺點也是很明顯的，嵌入ActiveX控件破壞了web應(yīng)用的整體html風(fēng)格，且這樣的控件比較大（一般超過1M），下載頗費時間）。市場上的非java類報表產(chǎn)品，一般都采用這種方案。3 Web打印控件介紹3.1 ScriptXScriptX是一個叫MeadCo的國外公司的產(chǎn)品，它分為基礎(chǔ)版（免費）和高級版（收費），基礎(chǔ)版可以對 頁眉，頁腳，頁邊距，紙張方向進行設(shè)置。高級版有一些額外的功能，由于是收費的，需要付費以后才能用到你系統(tǒng)中.3.2 DLPrinterDLPrinter打印控件完全免費

6、，界面大方、使用簡單、但無簽名，支持打印預(yù)覽、直接打印，可設(shè)置頁眉、頁腳、頁邊距、打印份數(shù)、紙張大小等信息。遺憾的是作者不知道是什么原因，從2007年至今沒的更新。 作者博客：下載地址：LPrinter WEB打印組件第2次更新2007-10-30：   Bug fixed:     1、在某些時候在調(diào)用PrintDirect的時候會出現(xiàn)錯誤，然后導(dǎo)致無限循環(huán)；     2、不能正確的控制打印份數(shù)；     3、在預(yù)覽模式下，如果更改紙張走向，必

7、須連續(xù)2次應(yīng)用才可以顯示最后1頁。   New function:     1、增加了CopyCount屬性以控制打印份數(shù)；     2、增加了預(yù)覽模式下的性能。   單擊DLPrinter.cab以下載DLPrinter組件，請各位在下載后，把DLPrinter.cab.rar的文件名改為DLPrinter.cab，然后在使用，一下是應(yīng)用示例：<OBJECT ID="DLPrinter" CLASSID="CLSID:5C230622-4

8、5E5-4e3c-893C-3BFDDC4DB5E4"  codebase="DLPrinter.cab" height="0" width="0" ></OBJECT><script>  DLPrinter.MarginLeft=20;  DLPrinter.MarginRight=20;  DLPrinter.MarginTop=20;  DLPrinter.MarginBottom=20;  DLPrinter.Copy

9、Count=2;  DLPrinter.PageHeader="這是測試的頁眉"  DLPrinter.PageFooter="這是測試的頁腳"  DLPrinter.IsLandScape=1;  /DLPrinter.ContentURL="</script><input type="button" id="btnPrint" value="Print Preview" onclick="DLPrinter.Pri

10、ntPreview()" /><input type="button" id="btnPrint" value="Print with prompt" onclick="DLPrinter.Print()" /><input type="button" id="btnPrint" value="Print without prompt" onclick="DLPrinter.PrintDirect()"

11、 />3.3 墻外打印控件墻外打印控件(QWPrint)是一款小巧的打印輔助軟件，能夠幫助眾多制作B/S類程序的程序員更加靈活的控制客戶端打印。 功能特點： 1) 小巧輕便，客戶端在第一次使用時只要下載一個ActiveX控件即可使用。 2) 控制多種打印設(shè)置。程序員可以通過控件進行多項設(shè)置，包括設(shè)置打紙的頁邊距，頁眉頁腳，紙張大小等參數(shù)。 3) 精確控制打印?？梢苑奖銓崿F(xiàn)web下的套打操作。 作者博客：下載地址：3.4 Lodop對于這個打印控件，用一個詞來形容：強大！不僅調(diào)用方便，而且功能比你想像中要強大得多。 更多介紹大家到

12、作者博客詳細了解。 作者博客：下載地址：3.5 WebPrint（商業(yè)）webprint使用簡單,靈活.能滿足絕大多數(shù)頁面打印的需要.它內(nèi)含一個在vc7.0上開發(fā)的ATL小控件（只有74k）,這個小控件主要實現(xiàn)對IE瀏覽器中文檔打印格式的控制，可以定制打印紙型，紙張來源，打印方向，設(shè)置表頭，表尾，表格，表格列寬，打印預(yù)覽，分頁，縮放等等用戶經(jīng)常關(guān)心的屬性。 webprint使用戶通過腳本可以控制自定義紙張，打印方向，頁邊距等等屬性達到定制打印的目的，這些定制屬性的設(shè)置不會改變IE瀏覽器的默認打印機屬性。也可以通過服務(wù)器端的頁面調(diào)用WebPrint生成客戶端的頁面達到設(shè)置打印參數(shù)的目的

13、。技術(shù)特點：1) 基于表格的頁面打印解決方案2) 采用了VC7.0開發(fā)的設(shè)置打印參數(shù)的小組件(僅75K)，實現(xiàn)打印紙張，方向，頁邊距等等的自定義。3) 采用了DHTML, 不僅實現(xiàn)分頁，換頁重新打印標(biāo)題，表頭表尾等等，而且還實現(xiàn)了精確的放縮功能。4) 因為將數(shù)據(jù)接口層定在標(biāo)準(zhǔn)的HTML元素這一層,所以適合所有在IE下運行的互聯(lián)網(wǎng)程序,包括ASP JSP PHP和VS.net等等.5) 使用簡單方便,需要學(xué)習(xí)的東西很少.6) 無須為webprint重新組織要打印的數(shù)據(jù)和樣式,直接將顯示的頁面?zhèn)魅雡ebprint即可實現(xiàn)數(shù)據(jù)和樣式的打印.7) 支持橫向分頁,分頁時固定列重復(fù)打印.8) 可以動態(tài)改變

14、每頁的標(biāo)題.9) 支持批打印,即一次打印多個打印作業(yè).10) 在同一個頁面上可以打印多個報表.11) 支持大數(shù)據(jù)量的打印.12) 可以設(shè)置打印到某些行時強行分頁.13) 支持圖片的打印.14) 可以導(dǎo)出為Excel文件。4 Web頁面打印應(yīng)用實例4.1 Javascript自帶函數(shù)<a href="javascript:window.print();">打印</a>4.2 IEWebBrowser組件詳細介紹參考：<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=

15、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=關(guān)閉所有><input name=Button onClick=document.all.WebBrowser.ExecWB(4,1) type

16、=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=打印預(yù)覽>

17、;<input name=Button onClick=document.all.WebBrowser.ExecWB(8,1) type=button value=頁面設(shè)置><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 onC

18、lick=document.all.WebBrowser.ExecWB(22,1) type=button value=刷新><input name=Button onClick=document.all.WebBrowser.ExecWB(45,1) type=button value=關(guān)閉>4.3 通過Excel實現(xiàn)頁面打印將網(wǎng)頁中數(shù)據(jù)導(dǎo)入excel中的方法有很多，這里先介紹一種，利用ActiveX控件的方式，即 Excel.Application, 這個控件是MS為excel提供的編程接口，在很多種編程語言種都可以通過該接口來操縱excel表格。下面用javascrip

19、t腳本來實現(xiàn)一個簡單的例子。< script language="javascript">function ExcelPrint()var excelApp;/存放Excel對象var excelBook;/存放Excel工件簿文件var excelSheet;/存放Excel活動工作表tryexcelApp = new ActiveXObject("Excel. Application");/創(chuàng)建Excel對象catch(e)alert("請啟用ActiveX控件設(shè)置！");return;excelBook = exce

20、lApp.Workbooks.Add();/創(chuàng)建Excel工作簿文件excelSheet = excelBook.ActiveSheet;/激活Excel工作表var rowLen = printTable.rows.length;/table對象的行數(shù)for (var i=0;i< rowLen;i+)var colLen = printTable.rows(i).cells.length;/table對象的列數(shù)for (var j=0;j< colLen;j+)/為Excel表的單元格賦值excelSheet.Cells(i+1,j+1).value = printTable.

21、rows(i).cells(j).innerText; /將表格中的每個單元格的innerText導(dǎo)入到excel的單元格中excelApp.Visible = true;/設(shè)置Excel對象可見excelSheet.PrintOut(); /打印工作表excelBook.Close(true); /關(guān)閉文檔excelApp.Quit(); /結(jié)束excel對象excelApp=null; /釋放excel對象< /script> 注意：運行該程序的前提是 IE要允許對沒有標(biāo)記為安全的Activex控件進行初始化和腳本運行。設(shè)置方法如下：打開控制面板Internet選項安

22、全性自定義級別對沒有標(biāo)記為安全的ActiveX控件進行初始化和腳本運行選中啟用，這樣我們的程序就可以 運行了。如果沒有啟用該ActiveX控件設(shè)置，那么程序在執(zhí)行創(chuàng)建Excel對象時會拋出一個異常，這時可以通過catch()語句來捕獲這個異常，并 且做出相應(yīng)的處理。 運行該程序必須客戶端安裝了MS EXCEL，否則Activex驅(qū)動不了。4.4 使用ScriptX控件1. 下載ScriptX.cab控件 官網(wǎng)地址：2. 使用object元素，修改codebase，classid的值，調(diào)用控件ScriptX.cab<OBJECT id="factory" st

23、yle="DISPLAY: none" codeBase="$rootUrljs/smsx.cab#VVersion=6,3,435,20" classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" viewastext></OBJECT>這段代碼用來加載cab文件，clsid和codebase必須要和你下載的cab中的信息對應(yīng)，否則組件會加載錯誤，這兩項其實不難找，只要你用winrar打開你下載的cab文件，然后找到擴展名是.inf的文件，然后打開之，就能看到了。&#

24、160;3. 調(diào)用控件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.pri

25、nting.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="")?'默認頁角':

26、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.bottomMarg

27、in =10.00;4. 應(yīng)用實例<html><head><meta http-equiv="imagetoolbar" content="no"><script language="javascript" src="print.js"></script><style media="print">.Noprint DISPLAY: none;</style><title>打印測試</title&

28、gt;</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('頁眉'

29、,'頁腳');</script><body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"><center class="Noprint"><input type=button value="打印" onclick="factor

30、y.printing.Print(true)"> <input type=button value="頁面設(shè)置" onclick="factory.printing.PageSetup()"> <input type=button value="打印預(yù)覽" onclick="factory.printing.Preview()"> <input type="button" value="關(guān)閉" onc

31、lick="window.close();"></center><center><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td align="center"><b>內(nèi)容</b></td></tr></table></center></body

32、></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() /預(yù)覽函數(shù)document.all("qingkongyema").clic

33、k();/打印之前去掉頁眉，頁腳document.all("dayindiv").style.display="none" /打印之前先隱藏不想打印輸出的元素（此例中隱藏“打印”和“打印預(yù)覽”兩個按鈕）var olecmdid = 7;var prompt = 1; var webbrowser = '<object id="webbrowser1" width=0 height=0 classid="clsid:8856f961-340a-11d0-a96b-00c04fd705a2"&g

34、t;</object>'document.body.insertadjacenthtml('beforeend', webbrowser); webbrowser1.execwb(olecmdid, prompt);webbrowser1.outerhtml = ""document.all("dayindiv").style.display=""/打印之后將該元素顯示出來（顯示出“打印”和“打印預(yù)覽”兩個按鈕，方便別人下次打印） function printture() /打印

35、函數(shù)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="vb

36、script">dim hkey_root,hkey_path,hkey_keyhkey_root="hkey_current_user"hkey_path="softwaremicrosoftinternet explorerpagesetup"'/設(shè)置網(wǎng)頁打印的頁眉頁腳為空function pagesetup_null()on error resume nextset regwsh = createobject("wscript.shell")hkey_key="header" 

37、;regwsh.regwrite hkey_root+hkey_path+hkey_key,""hkey_key="footer"regwsh.regwrite hkey_root+hkey_path+hkey_key,""end function'/設(shè)置網(wǎng)頁打印的頁眉頁腳為默認值function pagesetup_default()on error resume nextset regwsh = createobject("wscript.shell")hkey_key="header&quo

38、t; 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" leftmarg

39、in=0 topmargin=0 rightmargin=0 bottommargin=0 style="background-position: center 50%"><div align=center>你希望打印的內(nèi)容.</div><div align="center" id="dayindiv" name="dayindiv"><input type="button" class="tab" value=&qu

40、ot;打印" onclick="printture();"> <input type="button" class="tab" value="打印預(yù)覽" onclick="printpr();"><input type="hidden" name="qingkongyema" id="qingkongyema" class="tab" value="清空頁碼&qu

41、ot; onclick="pagesetup_null()"> <input type="hidden" class="tab" value="恢復(fù)頁碼" onclick="pagesetup_default()"></div></body></html>5.2 實現(xiàn)簡單的頁面局部打印5.2.1 Javascript實現(xiàn)function preview(oper).if (oper < 10).bdhtml=window.do

42、cument.body.innerHTML;/獲取當(dāng)前頁的html代碼sprnstr="<!-startprint"+oper+"->"/設(shè)置打印開始區(qū)域eprnstr="<!-endprint"+oper+"->"/設(shè)置打印結(jié)束區(qū)域prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); /從開始代碼向后取htmlprnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr);/從結(jié)束代碼向前取ht

43、mlwindow.document.body.innerHTML=prnhtml;window.print();window.document.body.innerHTML=bdhtml; else .window.print();使用很簡單 將頁面內(nèi)要打印的內(nèi)容加入中間<!-startprint1->XXXXX<!-endprint1->再加個打印按紐 onclick=preview(1)5.2.2 WebBrowser實現(xiàn)1. WebBrowser控件 <object ID='WebBrowser' WIDTH=0 HEIGHT=0

44、CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object> 2. WebBrowder控件的方法 /打印 WebBrowser1.ExecWB(6,1); /打印設(shè)置 WebBrowser1.ExecWB(8,1); /打印預(yù)覽 WebBrowser1.ExecWB(7,1); 關(guān)于這個組件還有其他的用法，列舉如下： WebBrowser.ExecWB(1,1) 打開 Web.ExecWB(2,1

45、) 關(guān)閉現(xiàn)在所有的IE窗口，并打開一個新窗口 Web.ExecWB(4,1) 保存網(wǎng)頁 Web.ExecWB(6,1) 打印 Web.ExecWB(7,1) 打印預(yù)覽 Web.ExecWB(8,1) 打印頁面設(shè)置 Web.ExecWB(10,1) 查看頁面屬性 Web.ExecWB(15,1) 好像是撤銷，有待確認 Web.ExecWB(17,1) 全選 Web.ExecWB(22,1) 刷新 Web.ExecWB(45,1) 關(guān)閉窗體無提示 但是打印是會把整個頁面都打印出來的,頁面里面有什么東

46、西就打印出來,我們有時候只需要打印數(shù)據(jù)表格,這時我們就要寫一個樣式了:把不想打印的部份隱藏起來：樣式內(nèi)容：<style type="text/css" media=print>.noprint.display : none </style>然后使用樣式就可以：<p class="noprint">不需要打印的地方</p>代碼如下:<script language="javascript"> function printsetup(). / 打印頁面設(shè)置&#

47、160;wb.execwb(8,1);  function printpreview(). / 打印頁面預(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=b