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 { /* ваші стилі для друку */ }", щоб налаштувати вигляд при друку.

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

Порада

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

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

Порада

Зберігайте конфіденційні або непотрібні елементи при друку, використовуючи CSS. Використовуйте "display: none;" для видалення непотрібних елементів, які не повинні з'являтися у друку.

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

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

Синтаксис

print()

Повернення

none

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

автор: Bond

правити

Переглядачі

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

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

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

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

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

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

Переглядач
	—

Приклади

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

<div id="resultContainer">Демонстраційний елемент</div>

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

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

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

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

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

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

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