利用CSS样式打印

 利用CSS样式打印

利用CSS样式打印是经常使用的一种打印方法，利用它可以非常方便的实现打印页面中的指定内容和分页打印，下面将通过具体实例介绍如何利用CSS样式打印。

实例302 利用CSS样式打印页面中的指定内容

实例说明

普通的Web打印，将会打印页面中的全部内容，但在开发实际网站时，通常只需要打印页面中指定的内容，为了解决该问题，可以应用CSS样式对打印内容进行控制。运行本实例，单击“打印”超级链接即可按用户的设置进行打印。实例运行结果如图11.14、图11.15所示。

 

图11.14 利用CSS样式打印页面中的指定内容

 

图11.15 打印预览效果

技巧：在进行Web打印时，可以通过以下操作控制是否打印背景颜色和图像。在IE窗口中，选择“工具”→“Internet选项”选项，在弹出的 “Internet选项”对话框中，选择“高级”选项卡，在“设置”列表中设置“打印背景颜色和图像”前面的复选框是否选中，如果选中，代表打印背景颜色 和图像，否则不打印背景颜色和图像。

技术要点

本实例主要应用了CSS样式的media类型。下面进行详细介绍。

media类型是CSS属性媒体类型，用于直接引入媒体的属性。其语法格式如下：

@media screen | print | projection | braille | aural | tv | handheld | all

参数说明

l     screen：指计算机屏幕。

l     print：指用于打印机的不透明介质。

l     projection：指用于显示的项目。

l     braille：盲文系统，指有触觉效果的印刷品。

l     aural：指语音电子合成器。

l     tv：电视类型的媒体。

l     handheld：指手持式显示设备。

l     all：用于所有媒体。

实现过程

（1）编写用于控制指定内容不打印的CSS样式，代码如下：

<style>

@media print{

div{display:none}

.bgnoprint{

   background:display:none;

}

.noprint{

   display:none

}

}

</style>

（2）为不需要打印的元素设置CSS样式，关键代码如下：

<table width="757" height="174" border="0" align="center"cellpadding="0"

cellspacing="0">

<tr class="noprint">

<td height="133" align="center" valign="top">

   <img src="Images/top.jpg" width="757" height="133"></td>

</tr>

…… //此处省略了其他HTML代码，具体代码请参见光盘

举一反三

根据本实例，读者可以：

实现打印库存明细；

实现打印库存数量达到预警线的库存商品信息。

实例303 利用CSS样式分页打印

实例说明

在制作数据打印程序时，对于多页数据（指的是一页纸 不能全部打印完毕的数据）通常采用分页打印。这里的分页打印是指在每一页数据的顶端都打印表头信息。下面将通过具体实例介绍如何利用CSS样式实现分页打 印。运行本实例，如图11.16所示，单击“打印预览”超级链接，可以查看打印效果，如图11.17所示，单击“打印”超级链接即可进行分页打印。

 

图11.16 利用CSS样式分页打印

 

图11.17 打印预览效果

技术要点

本实例主要应用了thead标记、tfoot标记和page-break-after属性。下面进行详细介绍。

（1）thead标记

thead用于设置表格的表头。

（2）tfoot标记

tfoot用于设置表格的表尾。

（3）page-break-after属性

page-break-after属性在打印文档时发生作用，用于进行分页打印。但是对于<br>和<hr>对象不起作用。

语法：

page-break-after：auto | always | avoid | left | right | null

参数说明

l     page-break：打印时在样式控制的对象前后换页。

l     after：设置对象后出现页分割符。设置为always时，始终在对象之后插入页分割符。

l     auto：在对象之后自动插入页分割符。

l     always：始终在对象之后插入页分割符。

l     avoid：未支持。避免在对象后面插入分割符。

l     left：未支持。在对象后面插入页分割符，直到它到达一个空白的左页边。

l     right：未支持。在对象后面插入页分割符，直到它到达一个空白的右页边。

l     null：空白字符串。取消了分割符设置。

实现过程

（1）在要打印的页面中添加用于显示客户信息的表格，并设置好表头、表尾及打印分页，关键代码如下：

<table width="650" border="1" cellpadding="0" align="center" cellspacing="0"

bgcolor="#FE7529" id="pay" bordercolor="#FE7529" bordercolordark="#FE7529"

bordercolorlight="#FFFFFF" style="border-bottom-style:none;">

<!--设置表头-->

<thead style="display:table-header-group;font-weight:bold">

<tr align="center" bgcolor="#FE7529">      

   <td width="155" height="30">客户名称</td>

   <td width="99">电话</td>

   <td width="59" >联系人</td>

   <td width="84">联系人电话</td>

   <td width="175">E-mail</td>

   <td width="64">所在地区</td>

</tr>

</thead>

<tr>

   <td height="30" bgcolor="#FFFFFF">采虹**集团</td>

   <td width="99">电话</td>

   <td width="59" >联系人</td>

   <td width="84">联系人电话</td>

   <td width="175">E-mail</td>

   <td width="64">所在地区</td>

</tr>

<tr>

   <td height="30" bgcolor="#FFFFFF">吉林省明日科技有限公司</td>

    ……         //此处省略了显示客户其他信息的HTML代码

</tr>

<tr>

<!--控制分页-->

<td height="30" bgcolor="#FFFFFF" style="page-break-after:always">鑫***有限公司</td>

     ……    //此处省略了显示客户其他信息的HTML代码

</tr>

<tr>

   <td height="30" bgcolor="#FFFFFF">东西南北***通讯公司</td>

    ……        //此处省略了显示客户其他信息的HTML代码

</tr>

<tr>

   <td height="30" bgcolor="#FFFFFF">明*有限责任公司</td>

   ……          //此处省略了显示客户其他信息的HTML代码

</tr>

<!--设置表尾-->

<tfoot style="display:table-footer-group; border:none;"><tr><td></td></tr></tfoot>

</table>

（2）控制“打印”和“打印预览”超级链接在打印时不显示。关键代码如下：

<style>

@media print{

.noprint{display:none}

}

</style>

<table width="647" align="center" class="noprint">

     <tr align="center" bgcolor="#FFFFFF">

    <td height="27" colspan="3" align="right">

    <a href="#" onClick="document.all.WebBrowser.Execwb(7,1)">打印预览</a>

    <a href="#" onClick="document.all.WebBrowser.Execwb(6,1)">打印</a>

    <a href="#" onClick="document.all.WebBrowser.Execwb(8,1)"></a> </td>

</tr>

</table>

举一反三

根据本实例，读者可以：

实现打印库存明细；

实现打印库存数量达到预警线的库存商品信息。