Есть ли способ прослушивания страницы, отправляемой на принтер с использованием JavaScript?

Question

Я пытаюсь создать функцию javascript, в которой содержимое отключается до инициализации window.print, а затем переключает содержимое обратно после отправки страницы на принтер. Я пытался использовать document.body.onfocus, но некоторые методы печати (например, печать в PDF) возвращают фокус на body до того, как страница будет фактически напечатана, таким образом заменяя предполагаемый контент оригинальным контентом.

Вот то, что у меня есть на данный момент, и где слушатель, я думаю, мне понадобится:

function printNewContent() {
            var title = document.getElementById("OriginalTitle");
            var secondtext = document.getElementById("TextBlock2");
            var copy = document.getElementById("StandardCopy");
            var origtitle = title.innerHTML;
            var origcopy = copy.innerHTML;
            var newcopy = document.getElementById("NewCopy").innerHTML;

            title.innerHTML = "New Title";
            copy.innerHTML = newcopy;
            secondtext.className = "displayNone";
            window.print();

            //Listen for page to be sent to the printer

            title.innerHTML = origtitle;
            copy.innerHTML = origcopy;
            secondtext.className = "PrintOnly SecondTxt";
        }

Я бы использовал задержки в сочетании с подходом onfocus, но это не надежный метод, и я ищу что-то настолько стабильное и последовательное, насколько это возможно. Любые предложения будут ценны. Спасибо!

Answer 1

Альтернативным подходом может быть использование медиазапроса CSS для отображения / скрытия контента на вашем сайте при его печати. Это гораздо лучший подход, чем пытаться манипулировать DOM перед печатью и пытаться вернуть его обратно.

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

Markup:

<div class="screen">
    This is the stuff normal users will see.
</div>
<div class="print">
    This is the stuff that will be printed.
</div>

CSS:

.print { display: none; }
@media print
{
    .print { display: block; }
    .screen { display: none; }
}

Answer 2

IE уже имеет onafterprint с более ранних дней.
С HTML5 onafterprint стал событием и для браузеров не IE.
Подробнее см. MDC и W3C on onafterprint

Answer 3

Я думаю, что есть событие onafterprint, но оно работает только в Internet Explorer.

http://forums.asp.net/p/969033/1217303.aspx

Вы должны использовать разные стили для разных экранов с помощью css:

Обработчик событий Javascript для печати