JS метод Object.print()

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

print() - це метод об'єкта Window в мові програмування JavaScript, який використовується для ініціації процесу друку поточної веб-сторінки. Цей метод відкриває вікно друку браузера та активує стандартний діалог друку, дозволяючи користувачеві вибрати друкарку та налаштувати параметри друку.

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

Щоб використати метод print(), достатньо викликати його без параметрів:

window.print();

Цей простий виклик буде запускати діалог друку, дозволяючи користувачеві вибрати друкарку та змінювати інші налаштування друку.

У реальних сценаріях застосування методу print() може бути різноманітним. Наприклад, в інтерфейсах веб-додатків можна додати кнопку "Друк", яка при кліці буде викликати метод print(). Це зручно для веб-сайтів, що надають звіти, статті, або іншу інформацію, яку можна зручно роздрукувати.

Для реалізації більшого контролю над процесом друку, можна використовувати події перед друком та після друку:

// Перед друком
window.onbeforeprint = function () {
    // Додаткові дії або налаштування перед друком
    console.log("Підготовка до друку...");
};

// Після друку
window.onafterprint = function () {
    // Додаткові дії або зміни після завершення друку
    console.log("Друк завершено.");
};

Це дозволяє розширити функціональність та взаємодію з користувачем в процесі друку веб-сторінок.

Порада:	Користуйтеся можливістю властивості стилів при друку, використовуючи медіа-запити CSS. Наприклад, застосуйте "`@media print { /* ваші стилі для друку */ }`", щоб налаштувати вигляд при друку.
Порада:	Перевіряйте, як ваш веб-сайт виглядає під час друку, використовуючи вбудовані інструменти браузера для перегляду екрану друку. Це дозволяє забезпечити оптимальний вигляд при виведенні на папір.
Порада:	Зберігайте конфіденційні або непотрібні елементи при друку, використовуючи CSS. Використовуйте "`display: none;`" для видалення непотрібних елементів, які не повинні з'являтися у друку.

Синтаксис

print()

Параметри

Return

none: Повертає значення типу "undefined". Цей метод не має визначеного значення, оскільки його головна функція - виклик діалогового вікна друку, а не повернення конкретної інформації або результату.

Переглядачі

Переглядач
	1	1	1.1	6	12

Переглядач
	4.4	18	114	1

Переглядач
	-	-

Приклади

"Простий друк" використовується метод print() для негайного відправлення поточного документу на друк. Це корисно в ситуаціях, коли не потрібно вказувати додаткові параметри друку, і просто важливо надрукувати поточну сторінку без додаткових налаштувань.

"Контрольований друк" використовується метод print() з передачею об'єкта параметрів друку. Це дозволяє точно налаштувати друк, включаючи встановлення заголовку документу та включення футера з датою. Такий підхід надає більше можливостей для контролю над виглядом надрукованого документу, що є важливим у випадках, коли потрібно надрукувати звіт чи іншу документацію із специфічним форматуванням.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/WNPBvoL">
  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>.

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

// У цьому прикладі ми використовуємо метод print() для друкування поточного документу.
function simplePrint() {
  // Викликаємо метод print() об'єкта Window.
  window.print();

  // Оновлюємо вміст результату для відображення дії.
  updateResult("Документ відправлено на друк.");
}

// Оновлення вмісту результату.
function updateResult(message) {
  var resultContainer = document.getElementById("resultContainer");
  resultContainer.innerHTML = message;
}

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

// У цьому прикладі ми використовуємо метод print() з параметрами для налаштування друку.
function controlledPrint() {
  // Створюємо об'єкт з параметрами друку.
  var printOptions = {
    // Встановлюємо заголовок документу для друку.
    documentTitle: "Звіт про роботу",

    // Включаємо вивід футера з датою.
    showFooter: true
  };

  // Викликаємо метод print() із передачею параметрів друку.
  window.print(printOptions);

  // Оновлюємо вміст результату для відображення дії.
  updateResult("Налаштований друк інформації для звіту.");
}

JS довідник

JavaScript

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