web打印个人心得

在做B/S开发时，常碰到页面打印的问题。

　　例如：如果需要将一个页面向分成多页打印，就要用到CSS样式表元素page-break-after。该元素功能与Word中的分页符类似，是用于网页的分页符。不过在Word中，分页符可以很明显的分隔两页面。如果在网页中使用page-break-after元素，只有在打印预览时，才能看到分隔效果。

　　先看一段代码，运行该代码，然后点击文件-->打印预览，看看预览页面与实际页面，有没有什么区别。然后，我在下文小做解释。

   提示：你可以先修改部分代码再运行

一、如何分隔打印页面：

　　1.使用样式

  引用:

.PageNext{page-break-after: always;}<!--控制分页-->

　　2.插入分页符

  引用:

<!-- 下面这个网页元素就是用于打印时分隔页面-->
<div id="pageNext1" style="visibility:hidden;"><p class="PageNext"></p></div>

　　其中的div标签的定义属性style="visibility:hidden;"，用于避免<p class="PageNext"></p>对页面的布局造成影响，你可以按照自己的理解，灵活使用，只要不干扰原有的布局，就可以了。

　　当然，你也可以使用其它html标签的分页样式：例如:<table class="PageNext">、<font class="PageNext"></font>等等，至于能否达到预想效果，可自己测试一下。

二、如何打印时隐藏非打印页面元素：

　　有些内容，例如：表格、按钮、文字，如果只想在页面中显示，而在打印时不想打印出来，那么在样式定义中，而且必须有<style media=print>，且在页面中的需要隐藏的元素里加上Noprint这个样式，在打印预览时就可以看到效果了。

  引用:

<style media=print>  
.Noprint{display:none;}<!--用本样式在打印时隐藏非打印项目-->  
</style>
<input type=button value="表单元素" class="Noprint">
<table border="1" bordercolor="#000000" class="Noprint"><tr><td>表格元素</td></tr></table>
<font class="Noprint">隐藏的文字</font>

三、打印调试时，使用虚拟打印机，节约纸张

　　如果你安装Adobe Acrobat 7.0 Professional时，会在系统安装一个虚拟打印机：Adobe PDF，这个与普通打印机一样，不过，打印时，生成一个pdf文件，可以看到打印的效果。类似的软件有很多，例如：fineprint。不过，最终的测试还是要在真实的打印机上纸质输出，因为两者的打印效果还是会有差别的。
　　如果使用Adobe PDF生成pdf文件以后，当pdf页面100%显示，如果页面中有表格，那么表格的显示可能会变形，所以必须再次调高放大倍数。