B/S 模式 套打 的一种实现方式<转>

套打” 是一种非常普遍的需求,在 C/S 模式中,尤为常见。目前,随着 B/S 模式的普遍使用,这种需求就体现在了 B/S 模式程序的需求中。 对于一些比较大型的应用, 基本都是基于报表工具的,像水晶报表(Crystal Report), 这些报表工具,基本都具有支持套打的功能。 我这里的实现方式,是非报表工具的轻量级实现,也是比较简单易懂的。

  • 套打:就是在模板页上的预订位置,打印出特定的内容

我这里的实现方式,主要是用 css 样式表来实现的。很多人,对 css 的使用,仅限于浏览器模式,很多人的写法是:

<style>

....

</style>

或者

<style type="text/css">

.....

</style>

而实际上,css 的书写方式,还有一个 attribute ,那就是 media,写作:

<style type="text/css" media="...">

....

</style>

而 media 的取值,有三种:

screen 屏幕; print 打印机; all 全部

。如果不指定 media 的值, 则默认是 all.

我们要实现的套打,其实就是 屏幕显示的是完整的内容,而打印出来的,只是某些预定位置的内容 这正是应用了 media 这个属性。

下面我们来实际做一个例子,来演示如何实现这种套打。

假设: 有如下一张表格,要实现套打 (图一

内容填写后, 如下图 (图二):

我们要打印出来的,是后填写入的内容,例如:张三、男等。

现在我们的思路已经出来了:

  • 将套打的格式,做成一张图片
  • 将此图片,作为一个TABLE的背景
  • 利用 CSS 的 media 的属性,为TABLE指定screen 和 print 的不同展现:screen 有背景、print 无背景

现在,套打的背景图片我们已经有了,如 图一

我们的TABLE填写内容后,如下图,下面是实际需要打印的内容:

为此TABLE指定背景图片(图一)后,则上下重合,屏幕显示如下

而打印预览中,显示的结果如下:

至此,说有的说明工作都完成了 ,下面上代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

 <head>

  <style type="text/css" media="screen">

    .td_table{

      background: url(td_print_bg.jpg) no-repeat; /*假设背景图片取名 td_print_bg.jpg*/

    }

  </style>



  <style type="text/css" media="print">

    .td_table{

      background-image: url();

    }

  </style>



  <style type="text/css" media="all">

    .td_table{

      width: 447px; /*背景图片的宽度 + TABLE的cellpadding + cellspacing*/

      height:116px; /*背景图片的高度 + TABLE的cellpadding + cellspacing*/

      table-layout:fixed;

      margin: 0 auto;

    }

  </style>

 </head>



 <body>

  <br><br><br><br>

  <table class="td_table" cellspacing="0" cellpadding="4" align="center">

  <tr>

    <td colspan="4" align="center">&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;张三</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;173CM</td>

    <td>&nbsp;</td>

    <td>&nbsp;65KG</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;28</td>

    <td>&nbsp;</td>

    <td>&nbsp;山东</td>

  </tr>

  </table>

 </body>

</html>

附上本例子的背景图片:

你可能感兴趣的:(模式)