JS властивість Event.afterprint

Загальний опис

afterprint — це подія, яка виникає у веб-браузері після завершення операції друку або закриття вікна попереднього перегляду друку. Вона дозволяє виконувати певний JavaScript-код після того, як користувач роздрукував документ або вийшов із режиму попереднього перегляду друку. Це може бути корисно для відновлення змін на сторінці, які були зроблені спеціально для друку, або для виконання інших дій, що необхідні після завершення процесу друку.

Подія afterprint може використовуватися з методами addEventListener() або шляхом призначення функції обробника подій. Наприклад:

window.addEventListener('afterprint', function(event) {
  console.log('Друк завершено або закрито попередній перегляд.');
});

У цьому прикладі, коли друк завершено або користувач закриває вікно попереднього перегляду друку, в консолі браузера з'явиться повідомлення.

Подія afterprint часто використовується разом із подією beforeprint, яка виникає перед початком друку або відкриттям попереднього перегляду друку. Це дозволяє веб-розробникам створювати динамічні інтерфейси, які можуть адаптуватися до процесу друку. Наприклад, перед друком можна приховати деякі елементи сторінки або змінити стиль, а після завершення друку — відновити початковий стан сторінки.

Важливо розуміти, що подія afterprint є подією високого рівня, що обробляється браузером, і вона не підтримується всіма браузерами. Наприклад, сучасні версії Chrome, Firefox, та Safari підтримують її, тоді як деякі старіші версії браузерів можуть не підтримувати. Тому перед використанням цієї події слід перевірити її підтримку у вашій цільовій аудиторії.

Приклад використання afterprint може включати в себе відновлення прихованих елементів сторінки, які були приховані під час друку, або записання у журнал інформації про те, що друк завершено.

правити

Порада

Не забувайте про кросбраузерну підтримку: перевірте, чи підтримує браузер користувача подію afterprint перед її використанням. Це можна зробити за допомогою простого перевірочного коду, наприклад, if ('onafterprint' in window).

автор: Bond правити

Порада

Подія afterprint корисна для відновлення сторінки до її початкового вигляду після того, як друк завершено. Якщо ви використовуєте стилі CSS, які змінюються під час друку (за допомогою медіа-запитів @media print), переконайтеся, що ці зміни скасовано після друку за допомогою цієї події.

автор: Bond правити

Порада

При використанні afterprint разом з beforeprint можна створювати інтерактивні сторінки, які автоматично змінюють свій вигляд для друку, а потім повертаються до нормального стану. Це корисно для приховування певних елементів під час друку, таких як кнопки, навігація або інтерактивні елементи.

автор: Bond правити

Порада

Переконайтеся, що обробники подій, пов'язані з afterprint, не викликають надмірне навантаження на браузер або не блокують інші важливі процеси. Використовуйте console.log() та інші методи налагодження, щоб перевірити, як працює ваш код у різних браузерах.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

window.addEventListener('afterprint', function(event) {
  // Ваш код тут
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	66	57	11.1	53	16

Підтримка: мобільні переглядачі

Переглядач
	66	66	57	11.3

Підтримка: серверні переглядачі

Переглядач
	15.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<div class="no-print">перший елемент no-print</div>
<div class="no-print">другий елемент no-print</div>

window.addEventListener('beforeprint', function(event) {
  document.querySelectorAll('.no-print').forEach(function(element) {
    element.style.display = 'none';
  });
});

window.addEventListener('afterprint', function(event) {
  document.querySelectorAll('.no-print').forEach(function(element) {
    element.style.display = 'block';
  });
});

window.addEventListener('afterprint', function(event) {
  fetch('/log-print', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ message: 'Друк завершено' })
  }).then(response => {
    console.log('Логування завершено', response.status);
  });
});