Как показать только определенные части с CSS для печати? - PullRequest
Новая
       22

Как показать только определенные части с CSS для печати?

24 голосов
/ 12 августа 2010

У меня есть страница с большим количеством данных, таблиц и контента.Я хочу сделать версию для печати, которая будет отображать только несколько выбранных вещей.

Вместо того, чтобы писать другую страницу только для печати, я читал о функции CSS для "@media print".

Во-первых, какие браузеры поддерживают это?Поскольку это внутренняя функция, все в порядке, если только последние браузеры поддерживают ее.

Я думал пометить несколько элементов DOM классом «printable» и в основном применить «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 ...

Ответы [ 6 ]

12 голосов
/ 12 августа 2010

Старт здесь . Но в основном то, что вы думаете, это правильный подход.

Спасибо, теперь мой вопрос на самом деле Став: Как применить CSS к класс и все его потомки ЭЛЕМЕНТЫ? Так что я могу подать заявку «display: block» к тому, что находится в «печатные» зоны.

Если для элемента установлено значение display:none;, все его дочерние элементы также будут скрыты. Но в любом случае. Если вы хотите, чтобы стиль применялся ко всем дочерним элементам чего-либо еще, выполните следующие действия: 

.printable * {
   display: block;
}

Это применило бы этот стиль ко всем дочерним элементам "печатаемой" зоны.

3 голосов
/ 27 апреля 2017

Я попал сюда, потому что мне было любопытно напечатать диаграмму, сгенерированную chart.js.Я хотел просто напечатать диаграмму прямо со страницы (с помощью кнопки, которая делает «window.print») без всего остального содержимого страницы.

Итак, я стал ближе, используя технику изответ здесь: Почему я не могу переопределить свойство отображения, примененное через звездочку? .

Вы должны применять звездочку к элементу body, а не только к нему.Итак, используя пример 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>

Так что, возможно, это поможет любому, кто доберется до этоговопрос через гугл.

3 голосов
/ 22 сентября 2016

Простой способ: 

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

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

        .print-only{
            display: block;
        }
}
</style>
2 голосов
/ 12 сентября 2017

Я предлагаю скрыть элемент, который вы не будете печатать:

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;
    }
}
2 голосов
/ 12 августа 2010

Почти все браузеры поддерживают его.Может быть полезно использовать атрибут media в теге link.

Использование display: none; в некоторых ваших правилах будет подходящим способом справиться с вашей ситуацией.

1 голос
/ 14 марта 2019

Если вы хотите, чтобы в браузере отображались некоторые ссылки и т. Д., Которые вы не хотите печатать.Кроме того, у вас есть некоторые логотипы и фирменные бланки, которые нужно указывать только на распечатанной странице.Кажется, это работает нормально:

Пример:

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