CSS 如何只打印页面的一部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/224078/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to print only parts of a page?
提问by Marcel
I am trying to hide some divs before the user prints this giant form, then display the divs again afterward. Thus I want to ignore the rest of the page, and only print the form itself.
我试图在用户打印这个巨大的表单之前隐藏一些 div，然后再次显示这些 div。因此我想忽略页面的其余部分，只打印表单本身。
Sure I couldopen a separate page when the user clicks the print button. The only thing is that the form is really long and it would be quite tedious to do that.
当然，当用户单击打印按钮时，我可以打开一个单独的页面。唯一的问题是表格真的很长，这样做会很乏味。
Edit: My previous question did not actually reflect what I was looking for. So I changed it to the current one.
编辑：我之前的问题实际上并没有反映我在寻找什么。所以我把它改成了现在的。
Also thanks to all that suggested window.onbeforeprint and window.onafterprint. That was relevant to my edited question.
还要感谢所有建议的 window.onbeforeprint 和 window.onafterprint。这与我编辑过的问题有关。
回答by Micky McQuade
First, The Ok Way:
首先，好的方式：
Take a look at window.onbeforeprint and window.onafterprint (the original question asked about how to do it programmatically I believe).
看看 window.onbeforeprint 和 window.onafterprint （最初的问题是问我相信如何以编程方式进行）。
Now, the Better Way:
现在，更好的方法：
A better way to do this is with a style that is specifically for printing. In other words, your div might look like this:
更好的方法是使用专门用于打印的样式。换句话说，您的 div 可能如下所示：
<div class="someClass noPrint">My Info</div>
You would then have this in your stylesheet:
然后你会在你的样式表中有这个：
.someClass {font-family:arial;}
@media print {
.noPrint { display: none; }
}
Another Option
另外一个选项
You could also put this in a separate stylesheet if you wanted so you don't have to mix styles:
如果需要，您也可以将其放在单独的样式表中，这样您就不必混合样式：
<link rel="stylesheet" type="text/css" media="print" href="print.css">
Your screen stylesheet could have ".someClass" defined one way and then your print stylesheet could have it defined a completely different way.
您的屏幕样式表可以以一种方式定义“.someClass”，然后您的打印样式表可以以完全不同的方式定义它。
回答by eyelidlessness
IE supports onbeforeprintand onafterprint, but what you really want is a print stylesheet.
IE 支持onbeforeprint和onafterprint，但您真正想要的是打印样式表。
<link rel="stylesheet" type="text/css" media="print" href="print.css">
See also: this answer
另见：这个答案
回答by spender
You should really implement this as CSS media=print styles. The media attribute of link element can be used to select to which media a stylesheet is applied. Check this article
您应该真正将其实现为 CSS media=print 样式。link 元素的 media 属性可用于选择样式表应用于哪个媒体。检查这篇文章
回答by David Schlosnagle
You may want to consider creating a style sheet specifically for printing using media="print"
您可能需要考虑使用media="print"创建专门用于打印的样式表
