如何仅使用 CSS 显示某些部分以进行打印？

Question

我有一个包含大量数据、表格和内容的页面。 我想制作一个只显示极少数选定内容的打印版本。

我没有为打印而写另一个页面，而是阅读了有关“@media print”的 CSS 功能。

首先，哪些浏览器支持它？由于这是一个内部功能，所以只要最新的浏览器支持它就可以了。

我正在考虑使用“可打印”类标记一些 DOM 元素，并且基本上将“显示：无”应用于除具有“可打印”类的那些元素之外的所有元素。 这可行吗？

我如何做到这一点？

编辑： 这是我目前所拥有的：

<style type="text/css">
@media print {
    * {display:none;}
    .printable, .printable > * {display:block;}
}
</style>

但它隐藏了一切。如何使这些“可打印”元素可见？

编辑： 现在尝试消极的方法

<style type="text/css">
@media print {
    body *:not(.printable *) {display:none;}
}
</style>

这在理论上看起来不错，但它不起作用。也许“不”不支持高级css ...

Answer 1

开始here。但基本上你所想的是正确的方法。

谢谢，现在我的问题实际上是 成为：如何将 CSS 应用于 班级及其所有后代 元素？这样我就可以申请 “显示：块”到任何在 “可打印”区域。

如果一个元素设置为display:none;，它的所有子元素也将被隐藏。但无论如何。如果您希望一种样式适用于其他事物的所有子项，请执行以下操作：

.printable * {
   display: block;
}

这会将样式应用于“可打印”区域的所有子项。

Answer 2

几乎所有浏览器都支持它。在link 标签上使用media 属性可能是有利的。

在您的某些规则中使用display: none; 将是处理您的情况的适当方式。

Answer 3

一个简单的方法：

<style>
    .print-only{
        display: none;
    }

    @media print {
        .no-print {
            display: none;
        }

        .print-only{
            display: block;
        }
}
</style>

Answer 4

我来到这里是因为我对打印由 chart.js 生成的图表感到好奇。我想直接从页面打印图表（使用执行“window.print”的按钮），而不需要页面的所有其他内容。

所以，我通过使用此处答案中的技术更接近了：Why can't I override display property applied via an asterisk?。

您必须将“星号”应用于“正文”元素，而不仅仅是单独使用。因此，使用 OP (Nathan) 添加到问题中的示例 CSS，我将其更改为：

<style type="text/css">
@media print {
    body * {display:none;}
    .printable, .printable > * {
    display: block !important;
  }
}
</style>

然后将该“可打印”类添加到图表本身，如

<canvas id="myChart" class="printable" width="400" height="400"></canvas>

当单击“打印”按钮时（通过此），除了图表之外，它删除了打印输出上的所有页面元素：

<script>
    myChart.render();
    document.getElementById("printChart").addEventListener("click",function(){
        window.print();
    });     
</script>

所以，也许这会帮助任何通过谷歌解决这个问题的人。

Answer 5

我建议隐藏你不会打印的元素：

HTML

<h1 class="no-print" >Welcome Just Screen</h1>
<div> I want print this section :)</div>
<div class="no-print">It's display only on screen</div>

CSS

@media print {     
    .no-print {
        display: none;
    }
}

Answer 6

如果您想在浏览器中显示一些链接等，您不想被打印。此外，您还有一些仅应出现在打印页面上的徽标和信头信息。 这似乎工作正常：

示例：

CSS：

@media print {
  .noPrint {
      display:none;
  }
}
@media screen {
   .onlyPrint {
       display: none;
   }
}

HTML：

<div class="noPrint" id="this_is_not_printed"  >
   <a href=links.html>
</div>
<div class="onlyPrint"  id="this_is_only_seen_on_printer" >
   <img scr=logo.png >
   <img scr=letterhead.png >
</div>