web列印的另類方法

來源:互聯網
上載者:User
web|web列印 相信用B/S方式做過應用的人都可能會遇到這樣一個問題,如何方便、美觀地實現報表列印。如果使用瀏覽器的列印菜單列印的話,將把網頁上的一些無用的東西打到報表上,比如應用菜單等。因為選擇列印菜單列印網頁將會把網頁中的所有內容全部列印出來,如果你的應用有分幀則列印內容將包括各幀中的內容,而你實際要的內容只是其中一部分。所以有很多應用就只能把列印功能放到後台完成了。  針對這種情況,我們該怎麼辦?其實可以有多種方法實現網頁列印功能。

  一種方法就是使用專業的列印工具,如Crystal Reports(水晶報表)。用過Visual Studio 5.0的朋友肯定記得這個工具,不過那時的版本只有4.幾。現在的最新版本已達9了,近幾個版本的水晶報表都支援WEB列印。最簡單的方法是先用水晶報表製作好模板,然後使用ASP帶參數調用製作好的模板即可。水晶報表在網頁上產生報表後,可以直接列印,也可以轉存為其它的比較通過的檔案如Excel檔案。使用水晶報表可以製作出非常漂亮的樣式,關鍵在你對水晶報表的開發能力上,但由於水晶報表價格較高,只有當項目很賺錢時才買得起。

  第二種方法是購買第三方的網上列印控制項,費用同水晶報表相比便宜,但效果效能到底如何則仁者見仁了。

  第三種方法是利用樣式表及JavaScript自訂函數實現。通過樣式表及JavaScript,實現網頁列印,效果也還可以。在此有一個執行個體請大家看看。下面是列印函數實現詳解:

<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即為你在列印的地區

// 這雷根據你要列印的哪些內容,從原顯示頁面中用

// <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,具體你想列印出什麼樣的格式全看你自己

// 了,但要注意:如果此處有什麼同網頁中不一致的,可能列印

// 出來的頁面同網頁格式、字型可能會有所不同

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

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

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

// 在此處重新設定的列印格式,根據你的列印要求,將原顯示的

// 網頁的DIV內容重新組合,可以根據你原來的表格內容,去掉

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

// 印的東西,只調用你要列印的內容,但這樣被忽略掉的地方將

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

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

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

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

// 重設document.body,列印文檔準備就緒

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

window.print();

window.history.go(0);

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

// 調用列印命令,列印當前視窗內容。當你列印時其實是一張新

// 的網頁了,但網頁檔案還是原先的。緊接著調用

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

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

}

}

-->

</script>

<style>

@media print {

.noprint {display:none}

}

</style>

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

  好了,一切就緒了,現在要做的就是調用DP函數,如果你將實現調用的按鈕設計在同一張網頁上,則直接調用即可;如果你用了分幀方法,實現調用的按鈕是在另一張網頁上,則在DP函數的第一行加入window.focus()命令,否則列印的只是有按鈕的網頁。

  第四種方法,實現是一種取巧的方法。一樣還是通過調用window.print()實現,只是將你要列印的內容專門產生一張網頁,而列印按鈕在另一幀上。假設報表網頁在mainFrame上,按鈕在topFrame上,按鈕調用PrintReports()函數,PrintReports()函數如下即可實現列印工作。

function PrintReports() //topFrame網頁中的函數

{

try

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

// 錯誤處理,如果在mainFrame中的網頁沒有DP函數則不列印

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

{

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

}

catch(e)

{

alert("no object to print!");

}

}

function DP() // mainFrame網頁中函數

{

window.focus();

if (window.print)

{

window.print();

}

}

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

  最後,如果你將IE瀏覽器的“檔案--版面設定”中的“頁首、頁角”的設定去掉,則效果更佳了。(轉載)




相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。