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

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

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

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

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

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

Ответы [ 4 ]

5 голосов
/ 11 октября 2008

Не думаю, что вам нужно печатать событие. Все, что вам нужно сделать, это настроить ваши стили @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 (я не тестировал другие браузеры).

5 голосов
/ 10 октября 2008

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

4 голосов
/ 10 октября 2008

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

HTML

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

print.css

.noprint {
  display: none;
}

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

Javascript

document.getElementById('div19').className='noprint';
1 голос
/ 10 октября 2008

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...