Centos系统下载大全 | Redhat系统下载大全 | Windows2012系统下载大全 | Windows2008系统下载大全| CMS教程 | 网站地图 51运维网-专注Linux/Unix系统安全运维!
当前位置:51运维网 > Web前端 > CSS > 正文

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

时间:2015-05-17 23:29 来源:网络整理 作者:51ou.com 阅读:

文件打印格式控制技巧

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实现打印页面功能:

打印机无法使用怎么办?

感谢您对【51运维网 http://www.51ou.com/】的支持,我们为您免费提供《如何控制打印格式?js+css控制打印格式有绝招》技术文章,《如何控制打印格式?js+css控制打印格式有绝招》详细使用和说明,有时《如何控制打印格式?js+css控制打印格式有绝招》可能不完善、敬请谅解!如果《如何控制打印格式?js+css控制打印格式有绝招》有错误请给我们留言,我们将尽快修复文章错误,如果您觉得本站不错,请分享给周围的朋友!谢谢!

顶一下
(0)
0%
踩一下
(0)
0%
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
验证码:点击我更换图片