| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Stop wasting time looking for files and revisions! Dokkio, a new product from the PBworks team, integrates and organizes your Drive, Dropbox, Box, Slack and Gmail files. Sign up for free.

View
 

網頁列印

Page history last edited by PBworks 14 years, 1 month ago

文章主題:開發必備:WEB列印程式碼大全

發表日期: 2005/01/11

文章內容:

 

web列印1

 

相信用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 = '

' + css + body + '

';

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

// 重設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();

}

}

 

這是一個朋友推薦得方法,不知道還有沒有別得更好得方法

 

 

web列印2

 

<!--語言無關 保存成 .HTML 看看-->

<html>

<head>

<title>看看</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<!--media=print 這個屬性可以在列印時有效-->

<style media=print>

.Noprint{display:none;}

.PageNext{page-break-after: always;}

</style>

 

<style>

.tdp

{

border-bottom: 1 solid #000000;

border-left: 1 solid #000000;

border-right: 0 solid #ffffff;

border-top: 0 solid #ffffff;

}

.tabp

{

border-color: #000000 #000000 #000000 #000000;

border-style: solid;

border-top-width: 2px;

border-right-width: 2px;

border-bottom-width: 1px;

border-left-width: 1px;

}

.NOPRINT {

font-family: "細明體";

font-size: 9pt;

}

 

</style>

 

</head>

 

<body>

<center class="Noprint">

<p>

<OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0>

</OBJECT>

<input type=button value=列印 onclick=document.all.WebBrowser.ExecWB(6,1)>

<input type=button value=直接列印 onclick=document.all.WebBrowser.ExecWB(6,6)>

<input type=button value=頁面設定 onclick=document.all.WebBrowser.ExecWB(8,1)>

</p>

<p> <input type=button value=列印預覽 onclick=document.all.WebBrowser.ExecWB(7,1)>

<br/>

</p>

<hr align="center" width="90%" size="1" noshade>

</center>

 

<table width="90%" border="0" align="center" cellpadding="2" cellspacing="0" class="tabp">

<tr>

<td colspan="3" class="tdp">第1頁</td>

</tr>

<tr>

<td width="29%" class="tdp"> </td>

<td width="28%" class="tdp"> </td>

<td width="43%" class="tdp"> </td>

</tr>

<tr>

<td colspan="3" class="tdp"> </td>

</tr>

<tr>

<td colspan="3" class="tdp"><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="50%" class="tdp"><p>這樣的報表</p>

<p>對一般的要求就夠了。</p></td>

<td> </td>

</tr>

</table></td>

</tr>

</table>

<hr align="center" width="90%" size="1" noshade class="NOPRINT">

<!--分頁-->

<div class="PageNext"></div>

<table width="90%" border="0" align="center" cellpadding="2" cellspacing="0" class="tabp">

<tr>

<td class="tdp">第2頁</td>

</tr>

<tr>

<td class="tdp">看到分頁了吧</td>

</tr>

<tr>

<td class="tdp"> </td>

</tr>

<tr>

<td class="tdp"> </td>

</tr>

<tr>

<td class="tdp"><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="50%" class="tdp"><p>這樣的報表</p>

<p>對一般的要求就夠了。</p></td>

<td> </td>

</tr>

</table></td>

</tr>

</table>

</body>

</html>

 

 

WEB列印 3

<!--語言無關 保存成 .HTML 看看-->

<script language="JavaScript">

function act_print(){

document.getElementById("div_print").style.visibility = "hidden";

window.print();

document.getElementById("div_print").style.visibility = "visible";

}

</script>

 

<br>

<div id="div_print" style="visibility: visible;">

<table width="200" border="0" cellspacing="0" cellpadding="5" align=center>

<tr align="center">

<td> </td>

<td bgcolor="993333" width="80"><a href="#" onclick="act_print();return false;"><font color=FFFFFF>我要列印 </font></a></td>

</tr>

 

</table>

</div>

Comments (0)

You don't have permission to comment on this page.