Атрибут onbeforeprint тега <body>
Описание
Атрибут onbeforeprint позволяет задать JavaScript-код, который выполняется непосредственно перед открытием диалога печати или предварительного просмотра страницы. Это событие помогает подготовить документ к печати.
<body onbeforeprint="prepareForPrinting()">
<h1>Отчет за 2025 год</h1>
<div id="content">...</div>
<script>
function prepareForPrinting() {
console.log('Подготовка к печати');
document.getElementById('content').style.fontSize = '12pt';
}
</script>
</body>
Типичные сценарии использования:
| Сценарий | Реализация |
|---|---|
| Изменение стилей | Увеличение шрифтов, скрытие ненужных элементов |
| Подготовка данных | Загрузка дополнительной информации для печати |
| Аналитика | Отслеживание действий печати |
| Уведомление пользователя | Показ сообщения о подготовке |
Рекомендации по использованию:
- Используйте для оптимизации контента для печати
- Сочетайте с CSS-медиазапросами @media print
- Не перегружайте обработчик сложными операциями
- Восстанавливайте исходное состояние в onafterprint
- Для сложных макетов создавайте специальную версию для печати
Практический пример с CSS:
<style>
.no-print { display: block; }
@media print {
.no-print { display: none; }
}
</style>
<body onbeforeprint="hideNonPrintableElements()">
<div class="no-print">Это не будет напечатано</div>
<div class="print-only">Только для печати</div>
<script>
function hideNonPrintableElements() {
// Дополнительная подготовка
document.querySelectorAll('.no-print').forEach(el => {
el.style.display = 'none';
});
}
</script>
</body>
Важные замечания:
- Событие может срабатывать при предпросмотре, а не только при печати
- Не все браузеры поддерживают одинаково (особенно мобильные)
- Изменения должны быть быстрыми, чтобы не задерживать печать
- Для сложных преобразований лучше заранее готовить print-версию
Альтернативные подходы:
<script>
// Современный подход с matchMedia
window.matchMedia('print').addListener(function(mql) {
if (mql.matches) {
console.log('Начало печати');
// Действия перед печатью
}
});
// Или с использованием window.print()
function customPrint() {
prepareForPrint();
window.print();
}
</script>
Примечание: Хотя onbeforeprint удобен для простых сценариев, для профессиональной печати документов рекомендуется создавать специальные print-версии страниц или использовать специализированные библиотеки.