JavaScript与CSS实现网页打印格式控制的两种方法

使用CSS控制打印样式

首先，可以通过在HTML中引用带有media="print"属性的CSS文件来控制打印时的样式。这种方式指定了仅当用户执行打印操作时，该样式表才会生效。

 
<link href="/style/print.css" rel="stylesheet" type="text/css" media="print">

假设在/style/print.css文件中定义了如下规则：

 
.noprint{display:none;}

在testPrint.html页面中应用上述print.css样式。在浏览器正常浏览网页时，用户无法直接看到该样式带来的视觉变化，但在执行打印操作时，该样式将发挥作用。例如，为某段内容添加noprint类后，在浏览器中该内容依然可见，但在打印预览或实际打印时，该内容将不再显示。

 
<div class="noprint">
<input type="button" onclick="window.print();" value="打印本页" />
</div>

当然，print.css中的样式可以根据实际需求自由编写，例如调整颜色（考虑到彩色图像在黑白打印机上效果不佳，可指定另一种打印样式）或修改字体等，发挥空间很大。

使用JavaScript控制打印行为

其次，可以使用JavaScript来控制打印行为。

由于各种原因，部分开发者可能对CSS不够熟练，而更擅长JavaScript，此时使用JavaScript进行控制也是一个不错的选择。

 
<script type="text/javascript">
<!-- 
//自动在打印之前执行
window.onbeforeprint = function(){
$("#test").hide();
} 
//自动在打印之后执行
window.onafterprint = function(){
$("#test").show();
} 
//--> 
</script>
<div id="test">这段文字不会被打印出来</div>

在打印操作开始前，系统会调用window.onbeforeprint函数。在此函数中，开发者可以根据需要重新构建HTML结构，例如隐藏某些不需要打印的元素。打印完成后，通常需要通过window.onafterprint函数恢复页面状态，确保打印后网页显示正常。

一个小技巧：虽然通常使用window.print()进行打印，但该对象也可以用于打印框架内的特定窗口，例如window.top.centerFrame.MainFrame.print();