11.4 利用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> 举一反三根据本实例,读者可以: 实现打印库存明细; 实现打印库存数量达到预警线的库存商品信息。 |