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

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

谢谢，现在我的问题实际上是成为：我如何应用CSS 阶级及其所有的后代元素？这样我才能申请 “显示：阻止”到任何内容 “可打印”区域。

如果元素设置为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

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

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

你必须将'星号'应用于'body'元素，而不仅仅是它自己。因此，使用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 4

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

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

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>

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

6 个答案:

示例：

CSS：

HTML：