如何控制打印格式?js+css控制打印格式有绝招

发布时间:2020-06-22编辑:脚本学堂
如何控制页面打印格式呢,用css控制打印格式方便,还是使用js控制网页打印格式更简单呢,本节提供了二个例子,分别采用css与js控制文件的打印格式。

文件打印格式控制技巧

1、css控制打印格式

用media="print"的css来控制要打印的文件testPrint.html中引用media为print的样式,表示打印时该样式才起作用。
 

<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中样式可以自定义。
 
2、javascript控制打印格式
 
代码:
 

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

打印之前,会调用window.onbeforeprint函数,打印之后,返回则调用window.onafterprint函数了 。

注意,在javascript中打印常用window.print(),打印框架,可以使用:window.top.centerFrame.MainFrame.print();

除了打印格式的控制之外,平常可能会有打印局部页面内容、打印预览等需求,此时可以参考如下教程:
 

js实现打印预览与打印分页

js实现打印页面功能

打印机无法使用怎么办?