将打印区域限制为div

Question

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

相关： 覆盖父级的CSS显示属性

Answer 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; }
}

编辑：

这与仅打印一个div的第二个答案非常相似

Answer 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/以查看结果。

Answer 3

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

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

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

将打印区域限制为div

问题描述

3 个解决方案

解决方案1
7 已采纳 2013-12-04 00:07:15

解决方案2
3 2013-12-04 00:14:04

解决方案3
1 2013-12-04 00:04:21

将打印区域限制为div

问题描述

3 个解决方案

解决方案1 7 已采纳 2013-12-04 00:07:15

解决方案2 3 2013-12-04 00:14:04

解决方案3 1 2013-12-04 00:04:21

解决方案1
7 已采纳 2013-12-04 00:07:15

解决方案2
3 2013-12-04 00:14:04

解决方案3
1 2013-12-04 00:04:21