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

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

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

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

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

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

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

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

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

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

Синтаксис

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

Значення

Return

Переглядачі

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

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

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

Приклади

У цьому прикладі, коли користувач натискає кнопку "Друкувати", подія beforeprint перевіряє, чи встановлено прапорець "Приховати текстове поле під час друку". Якщо прапорець встановлено, текстове поле приховується перед друком. Після завершення друку подія afterprint відновлює початковий вигляд сторінки, роблячи текстове поле знову видимим, якщо воно було приховано. Це забезпечує користувачам гнучкість у налаштуванні вигляду сторінки для друку без впливу на її веб-версію.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/LYKrEEy">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

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('Стилі сторінки відновлені після друку.');
});

JS довідник

JavaScript

Наповнення JS розділу