web印製的另類方法_經驗交流

web印刷的另類方法     選擇自 wfmazhenhai 的 Blog  
關鍵字   web印製的另類方法 
出處    
相信用B/S方式做過應用程式的人都可能會遇到這樣一個問題，如何相信用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}' 
'font-tds) 10px; color: #000000}' 
'＜/style＞' ;
// *************************** **************************
// 定義列印用的CSS，具體你想列印出什麼樣的格式全看你自己
// 了，但要注意：如果此處有什麼同網頁中不一致的，可能打印
// 出來的頁面同網頁格式、字體可能會有所不同
// *** **************************************************
var body ='＜table width="640" border="0" cellspacing="0" cellpadding="5"＞' 
' ＜tr＞ ' 
'＜tdclass="fbody ＞ ' 
' ＜div align="center" class=ftitle＞'   Div1   '＜/div＞'   Div2   
'＜/div＞'   Div2   
' ＜/td＠ 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瀏覽器的「檔案－頁面設定」中的「頁首、頁角」的設定去掉，則效果更佳了。 (轉載)