在做页面时,希望点击"打印"按钮,只把printonly中的内容打印出来,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
@media print {
.noprint,
input {
display: none;
}
.printonly {
display: block;
}
}
</style>
</head>
<body>
<div class="noprint">
这里是不需要打印的内容
</div>
<div class="printonly">
这里写要打印的内容
</div>
<input onClick="print()" value="点击打印" type="button">
</body>
</html>
- @media print里面的内容只对打印出来的内容有效,之外的内容就是屏幕显示的样式。
- 隐藏不需要使用display:none;
- 尽量不要让内容浮动,有些浏览器打印浮动的元素时,会截去浮动元素中的内容。