Html 将打印区域限制为一个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20364212/
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
Limit print area to a div
提问by Nick Grealy
Is there a way to print only the nested "id=printarea" div (with styling) using only css (not javascript), in IE8 on Windows?
有没有办法在 Windows 上的 IE8 中仅使用 css（不是 javascript）仅打印嵌套的“id=printarea”div（带样式）？
<div id="main">
This should NOT be shown in Print Preview
<div id="printarea">ONLY this should be shown in Print Preview
<table><tr><th>one</th><th>one</th></tr><tr><td>one</td><td>one</td></tr></table></div>
</div>
I've tried using css, but it displays nothing (obviously) due to inheritance. The following example shows my intention.
我试过使用 css，但由于继承，它什么都不显示（显然）。下面的例子显示了我的意图。
@media print {
* { display:none; }
#printarea { display:block; }
}
I've successfully used javascript (which works), but I don't consider it an elegant solution, as I'd have to pull in all css imports and style blocks in the document.write.
我已经成功地使用了 javascript（它有效），但我不认为它是一个优雅的解决方案，因为我必须在 document.write 中引入所有 css 导入和样式块。
function printDiv(divId){
var divToPrint = document.getElementById(divId);
newWin= window.open();
newWin.document.write('<style>table,tr,td,th{border-collapse:collapse;border:1px solid black;}</style>');
newWin.document.write(divToPrint.innerHTML);
newWin.document.close();
newWin.focus();
newWin.print();
newWin.close();
}
Example:http://jsfiddle.net/D7ZWh/2/
示例：http : //jsfiddle.net/D7ZWh/2/
回答by roo2
You will have to put all other content into html elements (note the p tag)
您必须将所有其他内容放入 html 元素中（注意 p 标签）
<body>
<p>This should NOT be shown in Print Preview</p>
<div id="main">
<p>This should NOT be shown in Print Preview</p>
<div id="printarea">ONLY this should be shown in Print Preview</div>
</div>
</body>
Then you can hide all other elements below a parent. do this for each parent in the hierarchy
然后您可以隐藏父项下的所有其他元素。为层次结构中的每个父级执行此操作
@media print {
body *, #main * { display:none; }
#main, #main #printarea, #main #printarea * { display:block; }
}
EDIT:
编辑：
this is very similar to the second answer to printing only one div
这与仅打印一个 div的第二个答案非常相似
回答by Ben D
If you can change the markup then obviously the best thing to do is wrap the content you want hidden in its own tag(s) and just hide them. However, if you really want to do this using only CSS and without modifying the DOM, then you can play some tricks with positioning. Try something like this:
如果您可以更改标记，那么显然最好的做法是将您想要隐藏的内容包装在自己的标签中并隐藏它们。然而，如果你真的想只使用 CSS 而不修改 DOM 来做到这一点，那么你可以玩一些定位技巧。尝试这样的事情：
@media print {
#main {position:relative; padding:0; height:1px; overflow:visible;}
#printarea {position:absolute; width:100%; top:0; padding:0; margin:-1px;}
}
This will basically collapse the #maindiv, and position the #printareaon top of it so it covers everything. (I added margin:-1pxso that it covers #main's border as well). Just make sure that #printareahas a background and you should be good to go.
这将基本上折叠#maindiv，并将 div#printarea放在它的顶部，使其覆盖所有内容。（我添加margin:-1px以便它也覆盖#main的边框）。只要确保它#printarea有背景，你就可以开始了。
Try printing the display frame from this fiddle: http://jsfiddle.net/D7ZWh/3/to see the result.
尝试从此小提琴打印显示框架：http: //jsfiddle.net/D7ZWh/3/以查看结果。
回答by David
The problem with what you want to do I that you're trying to hide the parent, and show the child. If you could wrap that text in a paragraph or span, then you could do something like
你想要做什么的问题是你试图隐藏父级，并显示子级。如果您可以将该文本包装在段落或跨度中，那么您可以执行以下操作
#main * {display:none;}
#main #printarea {display:block;}
So, basically you take all of #main's children, and hide them, and then show just print area.
所以，基本上你把所有#main 的孩子，隐藏起来，然后只显示打印区域。
