Javascript window.print() 设置打印样式和内容

最新推荐文章于 2025-02-18 22:19:31 发布

leinchu

最新推荐文章于 2025-02-18 22:19:31 发布

阅读量2.8w

点赞数 2

分类专栏： Javascript

本文链接：https://blog.youkuaiyun.com/leinchu/article/details/56479681

版权

Javascript 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种利用CSS媒体查询实现网页打印时显示特定内容的方法。通过设置不同类别的display属性，可以实现在打印预览中仅展示所需元素，同时隐藏不希望出现在打印文档中的元素。

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
.printonly{
	display:none
}
@media print{
	input,.noprint{
		display:none
	}
	.printonly{
		display:block;
		width:50%
	}
}
/**
.printonly{
	display:none
}
不能写到这里，会导致打印时printonly的内容也不显示
*/
</style>

<body>
<div class="noprint">
	这段打印时不显示
</div>
<div class="printonly">
    <h1>这段打印时会显示</h1>
    <hr>
    This is print-only
</div>
<input onClick="print()" value="点击打印" type="button">
</body>
</html>