Print: примеры (JAVASCRIPT)

Примеры использования

<button onclick='window.print()'>Печать страницы</button>

// После нажатия кнопки открывается диалоговое окно печати

function delayedPrint() {
  setTimeout(() => window.print(), 1000);
}
// Вызов через секунду после загрузки
window.onload = delayedPrint;

// Через 1 секунду после загрузки страницы откроется окно печати

Альтернативные методы в JavaScript

CSS Media Queries для печати: С помощью @media print можно определить стили, которые применяются только при печати страницы. Это позволяет скрыть ненужные элементы или изменить оформление.

Контекстное меню браузера: Пользователи могут использовать стандартное сочетание клавиш Ctrl+P или контекстное меню для печати без вызова JavaScript-функции.

iframe для печати части страницы: Для печати только определенного раздела страницы можно создать скрытый iframe, загрузить в него нужное содержимое и вызвать print() для этого iframe.

Аналоги в других языках программирования

PHP: Функция print() выводит строку, но не открывает диалог печати. Аналогом по функциональности может быть генерация PDF с последующей отправкой на печать.

<?php
print 'Это текст для вывода';
?>

Это текст для вывода

Python: Функция print() выводит текст в консоль, а не в диалоговое окно печати.

print('Текст в консоли Python')

Текст в консоли Python

C: Функция printf() используется для форматированного вывода в стандартный поток вывода.

#include <stdio.h>
int main() {
  printf('Вывод в консоль C');
  return 0;
}

Вывод в консоль C

Типичные ошибки

Ожидание возвращаемого значения: Функция не возвращает значение, поэтому попытка присвоить результат переменной приведет к undefined.

let result = window.print();
console.log(result);

undefined

Использование без объекта window в строгом режиме: В строгом режиме ES6+ при прямом вызове print() может возникнуть ошибка.

'use strict';
print(); // ReferenceError: print is not defined

ReferenceError: print is not defined

Блокировка интерфейса: Поскольку вызов функции блокирует выполнение скрипта до закрытия диалогового окна, это может привести к зависанию интерфейса при длительном ожидании.

Изменения в последних версиях

Спецификация функции window.print() остается неизменной на протяжении многих лет. Основные изменения касаются браузерных реализаций диалоговых окон печати, которые стали асинхронными в некоторых браузерах, уменьшая блокировку интерфейса. Современные браузеры также предоставляют API для более тонкого контроля над процессом печати через CSS Print API и возможности предварительного просмотра.

Расширенные примеры

Печать определенного элемента:

function printElement(elementId) {
  const originalContent = document.body.innerHTML;
  const printContent = document.getElementById(elementId).innerHTML;
  document.body.innerHTML = printContent;
  window.print();
  document.body.innerHTML = originalContent;
}

// Содержимое указанного элемента будет напечатано

Кастомный обработчик перед печатью:

window.onbeforeprint = function() {
  console.log('Сейчас откроется окно печати');
  document.body.classList.add('printing');
};
window.onafterprint = function() {
  console.log('Окно печати закрыто');
  document.body.classList.remove('printing');
};

// При вызове печати добавляется класс printing, после печати - удаляется

Печать с задержкой для применения стилей:

function printWithStyles() {
  const style = document.createElement('style');
  style.innerHTML = '@media print { body { font-size: 12pt; } }';
  document.head.appendChild(style);
  setTimeout(() => {
    window.print();
    document.head.removeChild(style);
  }, 100);
}

// Стили применяются перед печатью и удаляются после

Отключение кнопки печати на время обработки:

document.getElementById('printBtn').addEventListener('click', function() {
  this.disabled = true;
  window.print();
  this.disabled = false;
});

// Кнопка блокируется на время работы диалогового окна