代码之家 › 专栏 › 技术社区 › Nathan H

如何使用CSS只显示某些部分以便打印?

css-selectors printing css

Nathan H · 技术社区 · 14 年前

我想做一个打印版本,只会显示很少选定的东西。

我读到的是CSS在“@media print”上的特性,而不是为了打印而写另一个页面。

首先,什么浏览器支持它?因为这是一个内部特性,所以只要最新的浏览器支持就可以了。

这可行吗?

我如何做到这一点?

编辑: 到目前为止,我的情况是:

<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>

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

6 回复 | 直到 14 年前

Strelok 14 年前

起点 here

成为:如何将CSS应用于阶级及其后代 "display:block“对世界上的一切 “可打印”区域。

如果元素设置为 display:none;

.printable * {
   display: block;
}

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

jhpratt 6 年前

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

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

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

jp06 5 年前

如果你想在浏览器中显示一些链接等,你不想被打印出来。此外,你有一些标志和信头信息,只应在打印页上。这似乎很管用:

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>

Rick Hellewell 5 年前

我来这里是因为我对打印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>

然后将“printable”类添加到图表本身,如

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

单击“打印”按钮(通过此按钮)时,删除了打印输出中除图表以外的所有页面元素:

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

所以,也许这将有助于任何人通过google找到这个问题。

Daniel A. White 14 年前

media 属性 link 标签。

使用 display: none; 在你的某些规则中,这是处理你的情况的适当方法。

tschwab 6 年前

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