用vfp动态生成数据网页（一）

用vfp动态生成数据网页（一）2007-05-09说在前面

前几日有网友问道：问什么报表“另存为 HTML”的效果会这样的差劲，什么表格线条、图形都没了，就连最基本的排版效果都不见了！有没有什么方法解决？

这个问题要搞彻底解答，我想必须回答以下问题：

清楚的了解 *.frx 文件的意义，*.frx文件实际就是一个表文件（DBF），所有报表设置都在其中记录。从理论上讲，解读这个文件应是可以的，实际这是一件非常麻烦的事情。
把解读出来的信息用 HTML 语言表示出来，送入一个 *.htm 文件。
通用字段中的信息提取，这又是一件非常让人烦恼的事情。怎样把图片从字段中读出并以 BMP、JPG、GIF 格式保存供网页调用，恐怕这会让人头痛半天。

笔者撰写此文，将回避第一、第三个难题。也就是说我介绍的方法不能分析 *.frx 文件，并根据其设定自动产生 HTML 文件。我们只讨论怎样在 Visual FoxPro 中方便快速的生成数据网页，而这个网页要大家事先设计，只是可以在运行中填入数据。

我相信：在您的项目中以此方法为每一张报表预先设定一段“另存为 HTML”的代码，一定会增色不少！

不可不提的是，本文讲述的方法其实是 Visual FoxPro Web 解决方案的一个组成部分。您可以想象：Internet 服务程序接到客户指令，按照一定要求通过本文将要讨论的方法就可以快速产生一个 *.htm 文件（网页），返回给客户端的浏览器。（注意：这只是 Visual FoxPro Web 解决方案的一种！）

为这个报表定制一段生成网页的代码

了解 Product Inventory Report 的经济意义

这个报表名叫：“Product Inventory Report”，选自 Visual FoxPro 的“范例代码”。下面是它的设计视图：

它的数据来自于“Products”表，在本文中，这个表只有如下字段对我们有意义：

字段名称	字段类型	字段意义	其他
Product_id	C（6）	产品编号
Prod_name	C（40）	产品名称
In_stock	N（12,3）	库存数量	不打印小数
On_order	N（12,3）	已订购数量	不打印小数
Reorder_at	N（12,3）	采购临界数量（等于或低于此数量就应该采购）
Discontinu	L	是否还经营此产品

让我们回过头来看一看报表的细节带区，其中有五个待打印信息，如下：

产品编号（Product_id）
产品名称（Prod_name）
库存数量（In_stock）
已订购数量（On_order）
提示

每一种产品作为一行被列示，打印时使用以下逻辑检测每种产品信息，并决定打印格式：

不再经营此种产品（Discontinu=.F.）时，则“提示”信息为空，对本行的其他四种信息画上删除线！（黑色字体）
仍旧经营此种产品（Discontinu=.T.）并且“在库数量”<=“采购临界数量”时，则显示“提示”信息，对本行的所有五种信息红色字体表示。
仍旧经营此种产品（Discontinu=.T.）并且“在库数量”>“采购临界数量”时，则“提示”信息为空，对本行的所有五种信息黑色字体表示。

在 FrontPage 中规划网页

现在我们就开始设计网页吧！打开 FrontPage 2000，新建一张网页，以“所见即所得”的方式制作出一张“毛坯”网页，其形态如下：

如果您会网页设计有研究，作上面的网页可能只需要几分钟的时间。这张网页的“HTML”如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>My First VFP-HTML</title>
<style>
<！--
.boe1 { font-family: Verdana; font-size: 10pt; margin-left: 2 }
.boe3 { font-family: Verdana; font-size: 10pt; text-decoration: line-through; margin-left: 2 }
.boe2 { font-family: Verdana; font-size: 10pt; color: #FF0000; margin-left: 2 }
-->
</style>
</head>

<body leftmargin="50" topmargin="50">

<table border="1" width="94%" cellspacing="0" cellpadding="0" bordercolor="#000000">
<tr>
<td width="100%">
<p style="margin-bottom: -10"><font face="Verdana" size="2"><b>Description</b></font></p>
<p style="margin-left: 3; margin-right: 3"><font face="Verdana" size="3"><b>You can use the PrintWhen expression to change the fontstyles printed based on the values being printed. In thiscase, the detail line is printed in red for those products whose in stock is below the reorder level. Also, any products
that have been discontinued are printed in strikeout.</b></font></td>
</tr>
</table>
<p> </p>
<p align="center"><img border="0" src="..//html/title.jpg" width="426" height="30"></p>
<table border="0" width="100%">
<tr>
<td width="41%"><font face="Verdana" size="3"><b>Product</b></font></td>
<td width="17%"><font face="Verdana" size="3"><b>In Stock</b></font></td>
<td width="18%"><font face="Verdana" size="3"><b>On Order</b></font></td>
<td width="24%"></td>
</tr>
</table>
<table border="2" width="100%" bordercolor="#000000" height="1" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="1"></td>
</tr>
</table>
<table border="0" width="100%">
<tr>
<td width="8%"></td>
<td width="33%"></td>
<td width="17%"></td>
<td width="19%"></td>
<td width="23%"></td>
</tr>
</table>
</body>
</html>

使用样式表

这是一种网页优化技术，您可以不在意，但本文的举例中将使用到它！

这里要说明的是：在制作网页的时候，我使用了“CSS”（样式表）技术，事先定义了三种样式，也就是数据行按不同情况显示时采用的三种格式。其意图在于，将来生成数据网页时数据部分将重复出现（N 次），如果使用一般标记对其格式化，那些本就重复出现的标记会很长，降低效率。现在我们一次定义，以后反复引用，提高效率！下面的代码就我们建立的“样式表”：

在本文的举例中，如果不使用样式表技术，最普通的一行数据将如下定义：

如果使用样式表技术将如下：

可见数据行数越多，使用样式表技术越合算！

怎样在 FrontPage 中定义样式表呢？

“格式”菜单->“样式（S）...”->出现“样式”对话框->“新建（N）”->出现“新样式”对话框，如下：

->在此对话框中的“名称（选择器）”输入样式的名称，注意名称前面加点号，如：.boe1。

->点“格式（O）”，进行格式设定。完成后按“确认”保存样式。FrontPage 将自动把您定义的样式写入文件中。

进一步说，在应用时我们可以事先设计多种样式表，供用户选择套用，这样您的程序将更加完美！