如何仅使用CSS显示某些部分用于打印？

Question

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

我正在阅读有关"@media print"的CSS功能,而不是仅仅为了打印而编写另一个页面.

首先,哪些浏览器支持它？由于这是一个内部功能,只有最新的浏览器支持它才行.

我正在考虑使用"可打印"类标记一些DOM元素,并且基本上将"display:none"应用于除了具有"可打印"类的那些元素之外的所有内容.那可行吗？

我该如何实现这一目标？

编辑:这是我到目前为止:

<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

从这里开始.但基本上你所想的是正确的方法.

谢谢,现在我的问题实际上变成了:我如何将CSS应用于课堂及其所有后代元素？这样我就可以将"display:block"应用于"可打印"区域中的任何内容.

如果元素设置为其display:none;所有子元素也将被隐藏.但无论如何.如果您希望样式应用于其他所有子项,请执行以下操作:

.printable * {
   display: block;
}

这将把风格应用于"可打印"区域的所有孩子.

Answer 2

一个简单的方法：

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

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

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

Answer 3

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

例子：

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>

Answer 4

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

因此，我通过使用以下答案中的技术走得更近：为什么我不能覆盖通过星号应用的显示属性？.

您必须将“星号”应用于“主体”元素，而不仅仅是它本身。因此，使用 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>

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