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

我有一个包含大量数据，表格和内容的页面。我想制作一个打印版本，只显示很少选择的东西。如何仅使用CSS打印某些部分？

而不是写另一个页面只是为了打印，我正在阅读关于CSS的“@media print”功能。

首先，哪些浏览器支持它？由于这是内部功能，因此只有最新的浏览器支持它才行。

我正在考虑用一个“可打印”类来标记几个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 ...

来源

2010-08-12 Nathan H

元素，我认为你应该从另一个侧面接近它。隐藏不打印的内容，而不是隐藏所有内容，只显示要打印的位。因为用干净的方式实现CSS是不太可能的。 – Strelok 2010-08-12 00:34:38

它实际上可以像@Strelok所建议的那样进行：您可以将不应包含在打印中的所有元素标记为不打印，从而避免标记您实际需要的元素的容器。 .no-print {display：none：} 但它真的很笨。你想要做到这一点的方式更清洁，更聪明。但悲伤，这似乎是唯一的方法。希望它不是。你想要做什么是一个很好的用例父CSS选择器：https://css-tricks.com/parent-selectors-in-css/ 你可以说： * {显示：无; } .printable，.printable <* {display：block} 悲伤的是选择器不存在。 – jgomo3 2015-08-01 03:53:47

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

谢谢，现在我的问题实际上是成为：我该如何申请的CSS的类及其所有后裔元素？因此，我可以将 “display：block”应用于 “可打印”区域中的任何内容。

如果元素设置为display:none;，它的所有子元素也将被隐藏。但无论如何。如果你想有一个样式应用到别的东西所有的孩子，你执行以下操作：

.printable * { 
    display: block; 
}

这将样式应用到“打印”区域的所有儿童。

来源

2010-08-12 00:06:55 Strelok

这实际上是我正在阅读的文章 – 2010-08-12 00:12:26

感谢这几乎完美！现在唯一的问题是，不是所有的元素都应该是“块”。在我测试的时候，我意识到div是“block”，常规的东西是“inline”，表格是“table”，tbody是“table-row-group”，tr是“table-row”等等。可以为每个单独添加规则，但是有没有办法只是说“应用常规浏览器样式”？ – 2010-08-12 00:41:49

几乎所有的浏览器都支持它。使用link标记上的media属性可能会有好处。

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

来源

2010-08-12 00:07:10

谢谢，现在我的问题实际上正在成为：我如何将CSS应用到类及其所有的DESCENDANT ELEMENTS？这样我可以将“display：block”应用于“可打印”区域中的任何内容。 – 2010-08-12 00:14:06

一个简单的方法：

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

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

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

来源

2016-09-22 13:17:13 Polle

这是正确的，但如果.print-only元素是自然内联（例如）而不是块，它可能会导致格式不必要的中断。 – 2016-09-22 13:58:07

为什么你有两个'@@'？ – 2017-02-02 11:21:34

我猜'@@'是一个错字。 – 2017-08-31 15:23:06

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

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

您必须将“星号”应用于“body”元素，而不仅仅是自身。因此，使用范例CSS的OP（内森）加入到这个问题，我把它改成这样：

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

然后补充说，“打印”类图表本身，如

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

其中取消了对除图表打印输出所有的页面元素被点击（通过此）的“打印”按钮：

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

所以，也许这将帮助任何人通过谷歌获得了这个问题。

来源

2017-04-27 04:14:34

我建议躲，你不会打印

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

来源

2017-09-12 05:47:13 pixparker

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

回答

相关问题