将打印区域限制为 div答案

【问题标题】：Limit print area to a div将打印区域限制为 div
【发布时间】：2013-12-03 23:57:07
【问题描述】：

有没有办法在 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>

我尝试过使用 css，但由于继承，它（显然）什么也不显示。下面的例子说明了我的意图。

@media print {
    * { display:none; }
    #printarea { display:block; }
}

我已经成功使用了 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();
}

示例： http://jsfiddle.net/D7ZWh/2/

【问题讨论】：

标签： html css printing

【解决方案1】：

您必须将所有其他内容放入 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>

然后你可以隐藏父元素下面的所有其他元素。为层次结构中的每个父级执行此操作

@media print {
   body *, #main * { display:none; }
   #main, #main #printarea, #main #printarea * { display:block; }
}

编辑：

这与printing only one div的第二个答案非常相似

【讨论】：

如果您指定正文中的所有内容都应为display:none，为什么还必须指定#main 中的所有内容也应为display:none？不只是指定body * 还包括#main？

【解决方案2】：

如果您可以更改标记，那么显然最好的办法是将您想要隐藏的内容包装在它自己的标签中并隐藏它们。但是，如果你真的想只使用 CSS 而不修改 DOM 来做到这一点，那么你可以玩一些定位技巧。试试这样的：

@media print {
   #main {position:relative; padding:0; height:1px; overflow:visible;}
   #printarea {position:absolute; width:100%; top:0; padding:0; margin:-1px;}
}

这基本上会折叠#main div，并将#printarea 放在它上面，这样它就可以覆盖所有内容。（我添加了margin:-1px 以便它也覆盖#main 的边界）。只要确保#printarea 有背景，您就可以开始了。

尝试从这个小提琴打印显示框架：http://jsfiddle.net/D7ZWh/3/ 以查看结果。

【讨论】：

【解决方案3】：

你想要做的问题是你试图隐藏父母，并显示孩子。如果您可以将该文本包装在一个段落或跨度中，那么您可以执行类似的操作

#main * {display:none;}
#main #printarea {display:block;}

所以，基本上你把#main 的所有孩子都隐藏起来，然后只显示打印区域。

【讨论】：

我也会添加一个“#media #printarea * {display: block;}”，因为#main * 影响所有孩子，不仅是直接孩子，即使#printarea 是如图所示，它可能是 "#main > * {display: none;}" 但我认为这不是跨浏览器解决方案
我认为子选择器也可以。但是，是的，其中一个是必要的。