网页打印之分页打印、隐藏网页元素--[转]

时间：2011-04-08 来源：p小p

本文研究三个问题

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

　　先看一段代码，打开测试页面(print.htm)，点击IE的文件-->打印预览，看看预览页面与实际页面，有没有什么区别。然后，我在下文小做解释。

以下是引用片段：
<html>

<head>
<title>printer</title>

<style media=print>
.Noprint{display:none;}
</style>

<style>
.PageNext{page-break-after: always;}
.style8 {font-size: medium; color: #000066; }
</style>

</head>

<div id="pageNext1" style="visibility:hidden;">
        <p class="PageNext"></p>
    </div>

<div id="pageNext1" style="visibility:hidden;">
        <p class="PageNext"></p>
    </div>

    <TABLE width="100%" height="100" border="1" bordercolor="#000066">
        <Tr>
            <TD align="center" valign="top" bgcolor="#FFFFFF"><span class="style8">第三页</span> <br>
                打印时隐藏的Html元素： <br>
                1、
                <input type=button value="表单元素" class="Noprint">
                <p></p>
                2、
                <table border="1" bordercolor="#000000" class="Noprint">
                    <tr>
                        <td>表格元素</td>
                    </tr>
                </table>
                <p></p>
                3、<font class="Noprint">隐藏的文字</font> </TD>
        </Tr>
    </TABLE>
</body>
</html>

一、如何分隔打印页面：

　　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这个样式，在打印预览时就可以看到效果了。

以下是引用片段：

以下是引用片段：

<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%显示，如果页面中有表格，那么表格的显示可能会变形，所以必须再次调高放大倍数。

=========================================================

说明:还有一种分页方法，在DOC文档另存为htm格式后，打开文件，加入

　　要分页的地方插入如下内容：

也可以实现分页打印。