如何僅使用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打印某些部分？

回答

相關問題