《走过的路踩过的坑》--使用CSS3 @media控制页面打印

过了爱做梦的年纪s

于 2016-08-03 11:14:23 发布

阅读量5.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/Return__Null/article/details/52101485

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用CSS@media特性实现网页中特定元素仅在打印时显示或隐藏的效果，通过示例展示了如何让打印按钮在实际打印预览时不出现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

web系统中经常会有打印的需求，有的需要打印全部，有的可能只需要打印指定部分，要隐藏某些部分。

这里使用css @media来设置

example：实例在打印的时候，希望打印按钮的不要被打印出来

<html>
<head>

<script type="text/javascript">

function doPrint(){
	window.print();
}
</script>

<style media="print">
.btn{
	display:none;
}
</style>
</head>

<body>
<form name="form1" method="post" action="">
<table border="0" cellpadding="0" cellspacing="0" width="500" style="margin: 0 auto">
	
	<tr align="center" >
		<td> 名称 </td>
	</tr>
	<tr>
		<td >测试</td>
	</tr>	
	
	<tr height="50" align="center">
		<td width="4%" >
			<button class="btn" type="button" onclick="doPrint();">打印</button>
		</td>
	</tr>
</table>
</form>
</body>
</html>

打印后，你会发现打印按钮的button已经不见了。

这里设置了：

触发打印事件后，.btn就隐藏了