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

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

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

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

Я думал о том, чтобы пометить несколько элементов DOM классом "printable" и в основном применить "display: none" ко всему, кроме тех, что относятся к классу "printable". Это выполнимо?

Как мне это достичь?

EDIT: Это то, что у меня есть до сих пор:

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

Но он скрывает все. Как я могу сделать эти "печатные" элементы видимыми?

EDIT: Попытка теперь отрицательного подхода

<style type="text/css">
@media print {
    body *:not(.printable *) {display:none;}
}
</style>

Это выглядит хорошо в теории, однако это не сработает. Может быть, "не" не поддерживает расширенный CSS...

Ответ 1

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

Спасибо, теперь мой вопрос на самом деле становление: как применить CSS к класс И ВСЕ ЕГО ОСОБЕННОСТИ ЭЛЕМЕНТЫ? Чтобы я мог применить "display: block" - все, что находится в "печатные" зоны.

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

.printable * {
   display: block;
}

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

Ответ 2

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

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

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

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

Ответ 3

Я попал сюда, потому что мне было любопытно напечатать диаграмму, сгенерированную 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>

Так что, возможно, это поможет всем, кто попадает в этот вопрос через Google.

Ответ 4

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

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

Ответ 5

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

HTML

<h1 class="no-print" >Welcome Just Screen</h1>
<div> I want print this section :)</div>
<div class="no-print">It display only on screen</div>

CSS

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

Ответ 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>