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

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

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

Для використання події beforeprint необхідно додати обробник подій до об'єкта window, який буде викликаний кожного разу перед початком друку. Це можна зробити за допомогою методу addEventListener(), який дозволяє визначити функцію, що виконується у відповідь на подію. Наприклад:

window.addEventListener('beforeprint', function(event) {
  console.log('Готуємо сторінку до друку.');
});

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

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

Однак важливо зазначити, що подія beforeprint підтримується не всіма браузерами однаково. Більшість сучасних браузерів, таких як Chrome, Firefox, та Safari, підтримують цю подію, але старіші версії можуть не мати цієї функціональності. Тому завжди слід перевіряти підтримку браузера перед використанням цієї події у ваших веб-додатках.

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

правити

Порада

Подія beforeprint корисна для налаштування вмісту сторінки перед друком. Наприклад, можна тимчасово змінити стилі або додати спеціальні повідомлення, які з'являться лише на друкованій версії. Це дозволяє користувачам отримати більш чистий і зрозумілий документ.

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

Порада

Подія beforeprint може використовуватися для відправки аналітичних даних про те, що користувач друкує сторінку. Це може бути корисним для розуміння поведінки користувачів і вдосконалення інтерфейсу веб-додатка.

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

Порада

Використовуйте подію beforeprint для створення окремих стилів друку за допомогою JavaScript, якщо ви не хочете або не можете використовувати медіа-запити CSS (@media print). Це може бути корисним у динамічних додатках, де стилі змінюються в залежності від взаємодії користувача.

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

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

Синтаксис

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

Переглядачі

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

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

Переглядач
	63	6	13	50	12	9

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

Переглядач
	63	63	6	13

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

Переглядач
	—

Приклади

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

<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';
  });
  console.log('Елементи з класом no-print були приховані перед друком.');
});

window.addEventListener('beforeprint', function(event) {
  const body = document.body;
  body.style.fontSize = '12px';
  body.style.lineHeight = '1.2';
  console.log('Розмір шрифту та висота рядка були змінені для друку.');
});

window.addEventListener('afterprint', function(event) {
  const body = document.body;
  body.style.fontSize = '';
  body.style.lineHeight = '';
  console.log('Стилі сторінки відновлені після друку.');
});