Window: beforeprint — Ereignis · JavaScript-Referenz

Signatur

window.addEventListener("beforeprint", handler)

Beschreibung

Das Ereignis beforeprint wird am Window-Objekt ausgelöst, sobald der Benutzer den Druck startet (z. B. mit Strg+P, über das Browsermenü oder per window.print()) und bevor der Browser die Druckvorschau erstellt. Das Gegenstück ist afterprint. Es wird ausgelöst, wenn der Druckdialog geschlossen oder der Druck abgeschlossen wurde.

Typische Einsatzzwecke: das DOM vor dem Drucken anpassen, zum Beispiel Diagramme in druckfreundlicher Größe neu zeichnen, eingeklappte Inhalte (<details>, Akkordeons) aufklappen, Link-Adressen als Text einfügen oder einen Druckzeitstempel ergänzen. Mit afterprint stellt man danach den ursprünglichen Zustand wieder her.

Du kannst den Handler mit window.addEventListener("beforeprint", handler) registrieren oder über die Eigenschaft window.onbeforeprint setzen. Das Ereignis ist ein einfaches Event ohne zusätzliche Eigenschaften. Es lässt sich nicht abbrechen, der Druck kann also nicht verhindert werden.

Reine Layoutänderungen lassen sich meist besser deklarativ mit @media print in CSS umsetzen. Zu beforeprint greift man, wenn JavaScript nötig ist, etwa zum Neuberechnen von Canvas-Grafiken oder zum dynamischen Einfügen von Inhalten.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"beforeprint"`.
$handler Pflicht	(event: Event) => void		Callback, das vor dem Drucken aufgerufen wird. Es erhält ein einfaches `Event`-Objekt.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `once` oder `signal` (zum Entfernen per `AbortController`).

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Das Ereignis ist nicht abbrechbar, der Rückgabewert des Handlers wird ignoriert.

Beispiele

Details-Elemente vor dem Drucken aufklappen

let geoeffnet = [];

const vorDemDruck = () => {
  // Nur Elemente merken, die bisher geschlossen waren
  geoeffnet = [...document.querySelectorAll('details:not([open])')];
  geoeffnet.forEach((el) => el.setAttribute('open', ''));
  console.log(`${geoeffnet.length} Abschnitte aufgeklappt`);
};

const nachDemDruck = () => {
  geoeffnet.forEach((el) => el.removeAttribute('open'));
  geoeffnet = [];
};

window.addEventListener('beforeprint', vorDemDruck);
window.addEventListener('afterprint', nachDemDruck);

3 Abschnitte aufgeklappt

Variante mit der on-Property und Druckzeitstempel

window.onbeforeprint = () => {
  const stempel = document.createElement('p');
  stempel.id = 'druck-stempel';
  stempel.textContent = `Gedruckt am ${new Date().toLocaleString('de-DE')}`;
  document.body.append(stempel);
};

window.onafterprint = () => {
  document.getElementById('druck-stempel')?.remove();
};

window.print();

Listener mit removeEventListener wieder entfernen

const diagrammNeuZeichnen = () => {
  const canvas = document.querySelector('#umsatz');
  if (!canvas) return;
  // Feste Breite für A4-Hochformat
  canvas.width = 700;
  console.log('Diagramm für den Druck angepasst');
};

window.addEventListener('beforeprint', diagrammNeuZeichnen);

// Später, z. B. beim Verlassen der Ansicht in einer SPA:
window.removeEventListener('beforeprint', diagrammNeuZeichnen);

Alternative: Druckmodus per matchMedia erkennen

const druckMedia = window.matchMedia('print');

druckMedia.addEventListener('change', (e) => {
  console.log(e.matches ? 'Druckmodus aktiv' : 'Bildschirmmodus');
});

Druckmodus aktiv

// Wichtig · Fallstricke

Nicht abbrechbar: event.preventDefault() hat keine Wirkung, der Druck lässt sich nicht verhindern.
Nur synchrone Änderungen zählen verlässlich: Asynchrone Arbeit wie fetch, setTimeout oder nachladende Bilder ist oft noch nicht fertig, wenn der Browser die Druckvorschau erstellt. DOM-Änderungen solltest du deshalb direkt im Handler vornehmen.
Kompatibilität: Wird von Chrome, Edge, Firefox und Safari ab Version 13 unterstützt. Ältere Safari-Versionen und manche mobile Browser lösen das Ereignis nicht oder unzuverlässig aus. Als Ergänzung eignet sich matchMedia('print'). Chrome kann beforeprint und afterprint mehrfach auslösen, wenn in der Vorschau Einstellungen geändert werden.
CSS zuerst: Reine Layoutänderungen wie das Ausblenden der Navigation gehören in @media print. Das ist robuster und funktioniert auch ohne JavaScript.
Wird die Seite in einem <iframe> gedruckt, löst nur das Window des gedruckten Dokuments das Ereignis aus.

Siehe auch

Window.print() Window.matchMedia() EventTarget.addEventListener() EventTarget.removeEventListener() Element: mousewheel HIDDevice: inputreport Window: afterprint