web打印的另類(lèi)方法
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
相信用B/S方式做過(guò)應(yīng)用的人都可能會(huì)遇到這樣一個(gè)問(wèn)題,如何方便、美觀地實(shí)現(xiàn)報(bào)表打印。如果使用瀏覽器的打印菜單打印的話,將把網(wǎng)頁(yè)上的一些無(wú)用的東西打到報(bào)表上,比如應(yīng)用菜單等。因?yàn)檫x擇打印菜單打印網(wǎng)頁(yè)將會(huì)把網(wǎng)頁(yè)中的所有內(nèi)容全部打印出來(lái),如果你的應(yīng)用有分幀則打印內(nèi)容將包括各幀中的內(nèi)容,而你實(shí)際要的內(nèi)容只是其中一部分。所以有很多應(yīng)用就只能把打印功能放到后臺(tái)完成了。 針對(duì)這種情況,我們?cè)撛趺崔k?其實(shí)可以有多種方法實(shí)現(xiàn)網(wǎng)頁(yè)打印功能。 一種方法就是使用專(zhuān)業(yè)的打印工具,如Crystal Reports(水晶報(bào)表)。用過(guò)Visual Studio 5.0的朋友肯定記得這個(gè)工具,不過(guò)那時(shí)的版本只有4.幾。現(xiàn)在的最新版本已達(dá)9了,近幾個(gè)版本的水晶報(bào)表都支持WEB打印。最簡(jiǎn)單的方法是先用水晶報(bào)表制作好模板,然后使用ASP帶參數(shù)調(diào)用制作好的模板即可。水晶報(bào)表在網(wǎng)頁(yè)上生成報(bào)表后,可以直接打印,也可以轉(zhuǎn)存為其它的比較通過(guò)的文件如Excel文件。使用水晶報(bào)表可以制作出非常漂亮的樣式,關(guān)鍵在你對(duì)水晶報(bào)表的開(kāi)發(fā)能力上,但由于水晶報(bào)表價(jià)格較高,只有當(dāng)項(xiàng)目很賺錢(qián)時(shí)才買(mǎi)得起。 第二種方法是購(gòu)買(mǎi)第三方的網(wǎng)上打印控件,費(fèi)用同水晶報(bào)表相比便宜,但效果性能到底如何則仁者見(jiàn)仁了。 第三種方法是利用樣式表及JavaScript自定義函數(shù)實(shí)現(xiàn)。通過(guò)樣式表及JavaScript,實(shí)現(xiàn)網(wǎng)頁(yè)打印,效果也還可以。在此有一個(gè)實(shí)例請(qǐng)大家看看。下面是打印函數(shù)實(shí)現(xiàn)詳解: <script language="JavaScript" type="text/JavaScript"> <!-- function DP() { if (window.print) { var Div1 = document.all.Div1.innerHTML; var Div2 = document.all.Div2.innerHTML; // ***************************************************** // Div1、Div2即為你在打印的區(qū)域 // 這里根據(jù)你要打印的哪些內(nèi)容,從原顯示頁(yè)面中用 // <div id=Div1>Div1....</div><div id=Div2>Div2...</div> // 等標(biāo)示出來(lái),要打印多少項(xiàng)目就標(biāo)示多少 // ***************************************************** var css = '<style type="text/css" media=all>' + 'p { line-height: 120%}' + '.ftitle { line-height: 120%; font-size: 18px; color: #000000}' + 'td { font-size: 10px; color: #000000}' + '</style>' ; // ***************************************************** // 定義打印用的CSS,具體你想打印出什么樣的格式全看你自己 // 了,但要注意:如果此處有什么同網(wǎng)頁(yè)中不一致的,可能打印 // 出來(lái)的頁(yè)面同網(wǎng)頁(yè)格式、字體可能會(huì)有所不同 // ***************************************************** var body ='<table width="640" border="0" cellspacing="0" cellpadding="5">' + ' <tr> ' + ' <td class="fbody"> ' + ' <div align="center" class=ftitle>' + Div1 + '</div>' + Div2 + ' </td>' + ' </tr>' + '</table>'; // ****************************************************** // 在此處重新設(shè)置的打印格式,根據(jù)你的打印要求,將原顯示的 // 網(wǎng)頁(yè)的DIV內(nèi)容重新組合,可以根據(jù)你原來(lái)的表格內(nèi)容,去掉 // 不要打印的,你也可以能下面定義的noprint忽略掉你不想打 // 印的東西,只調(diào)用你要打印的內(nèi)容,但這樣被忽略掉的地方將 // 打印出空,不是很美觀。表格寬度要同打印的紙張寬度匹配。 // ****************************************************** document.body.innerHTML = '<center>' + css + body + '</center>'; // ****************************************************** // 重設(shè)document.body,打印文檔準(zhǔn)備就緒 // ****************************************************** window.print(); window.history.go(0); // ****************************************************** // 調(diào)用打印命令,打印當(dāng)前窗口內(nèi)容。當(dāng)你打印時(shí)其實(shí)是一張新 // 的網(wǎng)頁(yè)了,但網(wǎng)頁(yè)文件還是原先的。緊接著調(diào)用 // window.history.go(0),再回到打印前的頁(yè)面,效果相當(dāng)不差 // ****************************************************** } } --> </script> <style> @media print { .noprint {display:none} } </style> <!--//.noprint 定義了noprint,在以下不需要打印的地方加入 class="noprint"后,用window.print()打印就會(huì)忽略--> 好了,一切就緒了,現(xiàn)在要做的就是調(diào)用DP函數(shù),如果你將實(shí)現(xiàn)調(diào)用的按鈕設(shè)計(jì)在同一張網(wǎng)頁(yè)上,則直接調(diào)用即可;如果你用了分幀方法,實(shí)現(xiàn)調(diào)用的按鈕是在另一張網(wǎng)頁(yè)上,則在DP函數(shù)的第一行加入window.focus()命令,否則打印的只是有按鈕的網(wǎng)頁(yè)。 第四種方法,實(shí)現(xiàn)是一種取巧的方法。一樣還是通過(guò)調(diào)用window.print()實(shí)現(xiàn),只是將你要打印的內(nèi)容專(zhuān)門(mén)生成一張網(wǎng)頁(yè),而打印按鈕在另一幀上。假設(shè)報(bào)表網(wǎng)頁(yè)在mainFrame上,按鈕在topFrame上,按鈕調(diào)用PrintReports()函數(shù),PrintReports()函數(shù)如下即可實(shí)現(xiàn)打印工作。 function PrintReports() //topFrame網(wǎng)頁(yè)中的函數(shù) { try // ******************************************************* // 錯(cuò)誤處理,如果在mainFrame中的網(wǎng)頁(yè)沒(méi)有DP函數(shù)則不打印 // ******************************************************* { window.parent.frames("mainFrame").DP(); } catch(e) { alert("no object to print!"); } } function DP() // mainFrame網(wǎng)頁(yè)中函數(shù) { window.focus(); if (window.print) { window.print(); } } 我個(gè)人認(rèn)為這是最方便的方法了。 最后,如果你將IE瀏覽器的“文件--頁(yè)面設(shè)置”中的“頁(yè)眉、頁(yè)角”的設(shè)置去掉,則效果更佳了。(轉(zhuǎn)載) 該文章在 2010/8/18 1:22:01 編輯過(guò) |
關(guān)鍵字查詢(xún)
相關(guān)文章
正在查詢(xún)... |