随心所欲的Web页面打印技术

fantaxy025025

浏览: 1311475 次
性别:
来自: 北京

最近访客更多访客>>

大家都说我很棒

songhait

GDGZWQZ

zjut_wyj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Java_about

Web ASP.net IE ASP UI

摘自：http://blog.csdn.net/wxf0701/archive/2006/11/24/1412931.aspx

一.概述
对基于B/S架构的应用程序而言，客户端的页面打印一直是比较头疼的问题，简单的做法是：1.使用IE的打印功能；2.使用水晶报表。但以上两种办法，都有很大的局限性，很难实现特殊要求的排版和精确的定位，所以不能满足一些特殊客户的BT要求。为此，本人总结了自己在使用Web打印上的一点经验，和大家分享。
本文涉及以下技术：javascript、ActiveX、ASP.NET、GDI＋。

二.基本架构
首先，我们不能使用IE的打印功能，必须自己设计‘打印’按钮。很多人习惯将‘打印’按钮放在要打印的页面上，打印时为了不把这个按钮打印出来，采用办法如下：1.打印前隐藏按钮；2.打印；3.显示按钮。
我觉得这样比较麻烦，所以我采用框架。一共有三个页面：
1.main.htm :框架页面，上面是打印按钮，下面是要显示的页面。
2.header.htm :标题栏，至少包含一个打印按钮。
3.report.aspx :要打印的页面，由用户生成。

//main.htm
<html>
<head>
  <title></title>
</head>
  <frameset rows="10%,90%" frameborder="0" border="0" frameSpacing="0">
  <frame id="header" name="header" src="Header.htm" noresize scrolling="no">
  <frame id="report" name="report" src="Report.aspx" noresize scrolling="auto">
</frameset>
</html>

//header.htm
<html>
<head>
  <script id=clientEventHandlersJS language=javascript>
  
  </script>
</head>
<body>
  <INPUT id="btnPrint" type="button" value="Print" name="Print" onclick="return btnPrint_onclick()">
</body>
</html>

这样，在点击‘打印’按钮时，将直接打印report.aspx页面的内容，既简单又直观。

三.打印
要完全控制打印，就必须由程序设定页眉、页脚、页边距。每个客户端的IE设置都不尽相同，你可以要求你的客户修改他们的打印设置为你指定的值，显然这不现实。所以正确的做法是：
1.备份客户打印页面设置;
2.设置页眉页脚上下左右边距为自己需要的值;
3.打印;
4.恢复原来的打印页面设置。

这里用到一个叫ScriptX的控件。你需要下载一个文件：smsx.cab，下载地址：http://www.meadroid.com/scriptx/sxdownload.asp 。这个地址并不能保证长期有效，你可以在搜索引擎上搜索‘ScriptX’以获得更多相关信息。

在“header.htm”中增加该控件的引用：
<OBJECT id="factory" style="DISPLAY: none" codeBase="http://localhost/WebApplication1/smsx.cab#VVersion=6,3,434,12 "
classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" viewastext>
</OBJECT>
注意CodeBase指向你的实际存放文件的位置，在客户端第一次浏览该页面时，将下载并安装该控件，请确定客户端的安全设置允许安装控件。
那么此时 header.htm 的内容如下。

//header.htm
<html>
<head>
<script id="clientEventHandlersJS" language="javascript">

</script>

<OBJECT id="factory" style="DISPLAY: none" codeBase="http://localhost/WebApplication1/smsx.cab#VVersion=6,3,434,12 "
  classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" viewastext>
</OBJECT>
</head>
<body bgColor="#9999cc">
<INPUT id="btnPrint" type="button" value="Print" name="Print" onclick="return btnPrint_onclick()">
</body>
</html>

此时，不管客户端IE设置如何，都能正确打印页面，打印内容将完全取决于页面：report.aspx。

四.动态页面生成
1. 如果你的页面是静态页面，或者页面元素为固定数量，那就非常简单了。只要调整好各个元素位置就行了，绝对所见即所得。要注意的是一个A4纸的大小为21cm×29.7cm，对应象素大约为 794×1123 (系统分辨率96DPI) 。

2.如果你要生成一些图表，可以使用GDI＋，你自己绘制的图片绝对能满足客户需求。下面给一个例子，我在页面放一个Label，一个Image。Image动态生成，调整其位置使其打印时出现在第二页的左上角。

public class Report : System.Web.UI.Page
2

{
3

protected System.Web.UI.WebControls.Image Image1;
4

protected System.Web.UI.WebControls.Label Label1;
5

Web 窗体设计器生成的代码
17

private void Page_Load( object sender, System.EventArgs e)
19

{
20

if ( ! Page.IsPostBack)
21

{
22

InitImage();
23

}
24

}
25

private void InitImage()
27

{
28

Bitmap bmp = new Bitmap( 800 , 1120 );
29

Graphics g = Graphics.FromImage(bmp);
30

g.FillRectangle(Brushes.Gray, 0 , 0 , 800 , 1120 );
32

g.FillRectangle(Brushes.RoyalBlue, 0 , 0 , 100 , 600 );
34

g.FillRectangle(Brushes.Aqua, 600 , 0 , 100 , 600 );
35

g.FillRectangle(Brushes.Coral, 700 , 0 , 100 , 600 );
36

g.FillRectangle(Brushes.YellowGreen, 0 , 800 , 800 , 100 );
38

g.FillRectangle(Brushes.Beige, 0 , 900 , 800 , 100 );
39

g.FillRectangle(Brushes.SkyBlue, 0 , 1000 , 800 , 100 );
40

g.FillRectangle(Brushes.Tomato, 0 , 1100 , 800 , 20 );
41

string filename = Server.MapPath( " TempImages\\img1.jpg " );
43

bmp.Save(filename, System.Drawing.Imaging.ImageFormat.Jpeg);
45

this .Label1.Text = filename;
47

this .Image1.ImageUrl = filename;
48

this .Image1.Attributes[ " style " ] = " POSITION: absolute; LEFT: 0cm; TOP: 29.7cm " ; // 定位
49

}
50

}
51

注意：要保证存放图片的目录，有写权限。

3.以上技术只适合于页面元素为固定数量的情况，对于页面内容大小不定的情况，例如，要打印一份人员信息的清单，人员数量为1～1000不等，每页显示20条记录，要有规定的页眉、页脚，此时该如何处理。
思路：ASP.NET页面都有一个基类System.Web.UI.Page，该类有一个保护方法叫void Render(HtmlTextWriter writer)，就是通过这个方法，ASP.NET在后台把WEB服务器端控件的属性转换成HTML代码，并发送到客户端供浏览器显示。我们的办法就是“ 劫持”该方法，完全手工生成所需页面标记代码。
先看一个例子：
public class FrmRYInfo : System.Web.UI.Page
{
  private void Page_Load(object sender, System.EventArgs e)
  {
  }
  protected override void Render(HtmlTextWriter writer)
  {
   writer.Write("<HTML>");
   writer.Write("<body>");
   writer.Write("<h1>Hello,world!</h1>");
   writer.Write("</body>");
   writer.Write("</html>");
  }
}
编译并运行以上程序，可以看到一行一号字体的"Hello,world!",查看页面源文件，内容如下：
<HTML><body><h1>Hello,world!</h1></body></html>
对照上面代码，应该非常好理解，下面我们就做一个实际的例子，将信息从数据库读出，显示在页面上，每页显示15条记录。

protected override void Render(HtmlTextWriter writer)

{

writer.Write( " <HTML> " );

writer.Write( " <body> " );

DataTable tabRY = GetCustomerInfo(); // 读取数据库

int Lines = 15 ; // 每页行数

int Count = tabRY.Rows.Count;

int TotalPage = Count / Lines + (Count % Lines == 0 ? 0 : 1 );

for ( int CurrentPage = 0 ; CurrentPage < TotalPage; CurrentPage ++ )

{

int StartRow = CurrentPage * Lines;

int EndRow = StartRow + Lines;

if (EndRow > Count) EndRow = Count;

ProcessCurrentPage(writer,tabRY,StartRow,EndRow,CurrentPage,TotalPage);

}

writer.Write( " </body> " );

writer.Write( " </html> " );

}

private void ProcessCurrentPage(HtmlTextWriter writer, DataTable tabRY, int StartRow, int EndRow, int

CurrentPage, int TotalPage)

{

if (CurrentPage != 0 )

{

writer.Write( " <p style=page-break-before:always></p> " );

}

writer.Write( " <table width=630 height=417 border=0> " );

writer.Write( " <tr> " );

writer.Write( " <td width=624 height=47><div align=center style=font-size:24px>人员信息汇总

表 </ div ></ td > " );

writer.Write( " </tr> " );

writer.Write( " <tr> " );

writer.Write( " <td height=222> " );

writer.Write( " <table width=623 border=1 cellpadding=0 cellspacing=0> " );

writer.Write( " <tr> " );

writer.Write( " <td width=134><div align=center>姓名</div></td> " );

writer.Write( " <td width=134><div align=center>编号</div></td> " );

writer.Write( " <td width=134><div align=center>电话</div></td> " );

writer.Write( " <td width=134><div align=center>小灵通</div></td> " );

writer.Write( " </tr> " );

for ( int i = StartRow; i < EndRow; i ++ )

{

DataRow row = tabRY.Rows[i];

string XM = row[ " MC " ].ToString();

string BH = row[ " BH " ].ToString();

string DH = row[ " LXDH " ].ToString(); if (DH.Length == 0 )DH = " - " ;

string XLT = row[ " XLT " ].ToString();

writer.Write( " <tr> " );

writer.Write( " <td width=134><div align=center> " + XM + " </div></td> " );

writer.Write( " <td width=134><div align=center> " + BH + " </div></td> " );

writer.Write( " <td width=134><div align=center> " + DH + " </div></td> " );

writer.Write( " <td width=134><div align=center> " + XLT + " </div></td> " );

writer.Write( " </tr> " );

}

writer.Write( " </table> " );

writer.Write( " </td> " );

writer.Write( " </tr> " );

writer.Write( " <tr> " );

writer.Write( " <td height=37><div align=right>第 " + (CurrentPage + 1 ).ToString() + " 页，共 " +

TotalPage.ToString() + " 页</div></td> " );

writer.Write( " </tr> " );

writer.Write( " </table> " );

}

感觉又回到了用记事本做网页的年代，手工生成HTML代码，是不是真正叫“随心所欲”。
几点说明：
(1)在每一页（除了第一页）的头部加入 writer.Write("<p style=page-break-before:always></p>"); 目的是控制在打印时，打印机在此换页。这里通过强制打印机换页来实现页面的布局，与上面的绝对定位的办法不同。该标记只影响打印，不影响显示。
(2)用记事本做网页绝对很痛苦，而且HTML标记也很不好用，我的办法是：用Dreamweaver生成需要的页面，再参照其HTML代码进行编程。
(3)尽量使用HtmlTextWriter类提供的一些其它方法如WriteBeginTag等取代Write方法，这样可以提高页面在客户端的兼容性。同时在每个标记后加入writer.WriteLine();进行换行，以便于调试。

分享到：

学习JavaScript | 解决问题：myeclipse中数据库已连接但看不 ...

2009-06-16 20:12
浏览 1400
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论