Как я могу настроить вывод браузера для печати/предварительного просмотра?

Я пытаюсь динамически скрыть определенные DIV, когда печать (или предварительный просмотр) происходит из браузера.

Я могу легко различать статически, имея две таблицы стилей, одну для обычных и одну для печатных материалов:

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

Один из способов легко решить эту проблему - обработать событие DOM для обработки печати/просмотра печати, тогда я мог бы просто использовать jQuery для изменения отображения: нет в классах, которые необходимо скрыть, но я не могу найти событие печати DOM !!

Кто-нибудь знает, какое решение?


browser css printing
person user26793    schedule 10.10.2008    source источник
comment
Вы имеете в виду, что вам нужно скрыть элементы div на экране после того, как пользователь распечатает (или предпросмотрит) страницу?   -  person Patrick McElhaney    schedule 10.10.2008

Ответы (4)


arrow_upward
5
arrow_downward

Не все браузеры позволяют захватывать событие печати. Я видел, как это решалось путем добавления ссылки «распечатать эту страницу», а затем использования этого события click для выполнения того, что вам нужно.

person derby    schedule 10.10.2008

arrow_upward
5
arrow_downward

Я не думаю, что вам нужно событие для печати. Все, что вам нужно сделать, это настроить @media print стили на основе ваших критериев Javascript (?). Когда пользователь попытается распечатать страницу, будет применен стиль @media print, и ваши стили будут действовать:

<html>
<head>
<style id="styles" type="text/css">
@media print { .noprint { display:none; } }
</style>
<script type="text/javascript">
var x = Math.random();

if (x > .5) {
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = '@media print { .maybe_noprint { display:none; } }';
    document.getElementsByTagName('head')[0].appendChild(style);
}
</script>
</head>
<body>
<div class="noprint">This will never print.</div>
<span class="maybe_noprint">This may print depending on the value of x.</span>
</body>
</html>

Если вы используете критерии на стороне сервера для определения того, что печатается, то просто пусть код на стороне сервера выдает @media print для оформления классов по мере необходимости. Кроме того, вы можете подумать об изменении существующего класса, который уже находится внутри @media print, или о создании нового CSS с использованием чего-то другого, кроме innerHTML, что, признаюсь, звучит ужасно, но, похоже, работает в Opera 9.6, Safari для Windows 3.1. .2, IE 6 и Firefox 2.0.0.17 (другие браузеры я не тестировал).

person Grant Wagner    schedule 10.10.2008

arrow_upward
4
arrow_downward

Просто пометьте эти DIV классом, скрытым в таблице стилей печати:

HTML

<div id='div19' class='noprint'>
  ...
</div>

print.css

.noprint {
  display: none;
}

Если вы заранее не знаете, какие элементы вам нужно скрыть, вы можете использовать javascript, чтобы установить класс для данных объектов:

JavaScript

document.getElementById('div19').className='noprint';
person Marcus Downing    schedule 10.10.2008

arrow_upward
1
arrow_downward

В IE есть событие onbeforeprint. Похоже, что он не поддерживается другими основными браузерами. (Я тестировал Firefox 3.0.3 и Safari 3.1.2.)

person Patrick McElhaney    schedule 10.10.2008