相信用B/S方式做過應用的人都可能會遇到這樣一個問題，如何方便、美觀地實現(xiàn)報表打印。如果使用瀏覽器的打印菜單打印的話，將把網(wǎng)頁上的一些無用的東西打到報表上，比如應用菜單等。因為選擇打印菜單打印網(wǎng)頁將會把網(wǎng)頁中的所有內(nèi)容全部打印出來，如果你的應用有分幀則打印內(nèi)容將包括各幀中的內(nèi)容，而你實際要的內(nèi)容只是其中一部分。所以有很多應用就只能把打印功能放到后臺完成了。　　針對這種情況，我們該怎么辦？其實可以有多種方法實現(xiàn)網(wǎng)頁打印功能。

　　一種方法就是使用專業(yè)的打印工具，如Crystal Reports(水晶報表)。用過Visual Studio 5.0的朋友肯定記得這個工具，不過那時的版本只有4.幾?，F(xiàn)在的最新版本已達9了，近幾個版本的水晶報表都支持WEB打印。最簡單的方法是先用水晶報表制作好模板，然后使用ASP帶參數(shù)調(diào)用制作好的模板即可。水晶報表在網(wǎng)頁上生成報表后，可以直接打印，也可以轉(zhuǎn)存為其它的比較通過的文件如Excel文件。使用水晶報表可以制作出非常漂亮的樣式，關鍵在你對水晶報表的開發(fā)能力上，但由于水晶報表價格較高，只有當項目很賺錢時才買得起。

　　第二種方法是購買第三方的網(wǎng)上打印控件，費用同水晶報表相比便宜，但效果性能到底如何則仁者見仁了。

　　第三種方法是利用樣式表及JavaScript自定義函數(shù)實現(xiàn)。通過樣式表及JavaScript，實現(xiàn)網(wǎng)頁打印，效果也還可以。在此有一個實例請大家看看。下面是打印函數(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)容，從原顯示頁面中用

// <div id=Div1>Div1....</div><div id=Div2>Div2...</div>

// 等標示出來,要打印多少項目就標示多少

// ***************************************************** 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)頁中不一致的，可能打印

// 出來的頁面同網(wǎng)頁格式、字體可能會有所不同

// *****************************************************

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>';

// ******************************************************

// 在此處重新設置的打印格式，根據(jù)你的打印要求，將原顯示的

// 網(wǎng)頁的DIV內(nèi)容重新組合，可以根據(jù)你原來的表格內(nèi)容，去掉

// 不要打印的，你也可以能下面定義的noprint忽略掉你不想打

// 印的東西，只調(diào)用你要打印的內(nèi)容，但這樣被忽略掉的地方將

// 打印出空，不是很美觀。表格寬度要同打印的紙張寬度匹配。

// ******************************************************

document.body.innerHTML = '<center>' + css + body + '</center>';

// ******************************************************

// 重設document.body，打印文檔準備就緒

// ******************************************************

window.print();

window.history.go(0);

// ******************************************************

// 調(diào)用打印命令，打印當前窗口內(nèi)容。當你打印時其實是一張新

// 的網(wǎng)頁了，但網(wǎng)頁文件還是原先的。緊接著調(diào)用

// window.history.go(0)，再回到打印前的頁面，效果相當不差

// ******************************************************

}

}

-->

</script>

<style>

@media print {

.noprint {display:none}

}

</style>

<!--//.noprint 定義了noprint，在以下不需要打印的地方加入 class="noprint"后，用window.print()打印就會忽略-->

　　好了，一切就緒了，現(xiàn)在要做的就是調(diào)用DP函數(shù)，如果你將實現(xiàn)調(diào)用的按鈕設計在同一張網(wǎng)頁上，則直接調(diào)用即可；如果你用了分幀方法，實現(xiàn)調(diào)用的按鈕是在另一張網(wǎng)頁上，則在DP函數(shù)的第一行加入window.focus()命令，否則打印的只是有按鈕的網(wǎng)頁。

　　第四種方法，實現(xiàn)是一種取巧的方法。一樣還是通過調(diào)用window.print()實現(xiàn)，只是將你要打印的內(nèi)容專門生成一張網(wǎng)頁，而打印按鈕在另一幀上。假設報表網(wǎng)頁在mainFrame上，按鈕在topFrame上，按鈕調(diào)用PrintReports()函數(shù)，PrintReports()函數(shù)如下即可實現(xiàn)打印工作。

function PrintReports() //topFrame網(wǎng)頁中的函數(shù)

{

try

// *******************************************************

// 錯誤處理，如果在mainFrame中的網(wǎng)頁沒有DP函數(shù)則不打印

// *******************************************************

{

window.parent.frames("mainFrame").DP();

}

catch(e)

{

alert("no object to print!");

}

}

function DP() // mainFrame網(wǎng)頁中函數(shù)

{

window.focus();

if (window.print)

{

window.print();

}

}

我個人認為這是最方便的方法了。

　　最后，如果你將IE瀏覽器的“文件－－頁面設置”中的“頁眉、頁角”的設置去掉，則效果更佳了。(轉(zhuǎn)載)

該文章在 2010/8/18 1:22:01 編輯過