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

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

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

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

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

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

источник

2008-10-10 user26793

Вы имеете в виду, что вам нужно скрыть divs на экране после того, как пользователь распечатает (или распечатает превью) страницу? – 2008-10-10 12:19:43

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

источник

2008-10-10 12:22:02

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

источник

2008-10-10 12:24:59 derby

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

HTML

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

print.css

.noprint { 
    display: none; 
}

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

Javascript

document.getElementById('div19').className='noprint';

источник

2008-10-10 13:20:48

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

источник

2008-10-10 20:06:08

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

ответ

Смежные вопросы