Window: afterprint — Ereignis · JavaScript-Referenz

Signatur

window.addEventListener("afterprint", handler)

Beschreibung

Das Ereignis afterprint wird am Window-Objekt ausgelöst, sobald das Dokument an den Drucker übergeben wurde oder der Nutzer den Druckdialog bzw. die Druckvorschau geschlossen hat, auch wenn er dabei abgebrochen hat. Es ist das Gegenstück zu beforeprint, das direkt vor dem Öffnen des Druckdialogs feuert.

Meist verwendet man die beiden Ereignisse zusammen: In beforeprint passt man das Dokument für den Druck an, zum Beispiel indem man Diagramme in fester Größe rendert, eingeklappte Bereiche aufklappt oder einen Druck-Hinweis einblendet. In afterprint macht man diese Änderungen wieder rückgängig. Außerdem eignet sich das Ereignis für Statistiken („Druck ausgelöst“) oder dafür, ein eigens zum Drucken geöffnetes Popup-Fenster wieder zu schließen.

Einen Handler registriert man mit window.addEventListener("afterprint", handler) oder über die Eigenschaft window.onafterprint = handler. Das Ereignis ist ein einfaches Event ohne zusätzliche Eigenschaften. Es kann nicht abgebrochen werden und steigt nicht in der DOM-Hierarchie auf.

Wichtig: afterprint sagt nicht, ob tatsächlich gedruckt wurde. Auch ein abgebrochener Dialog löst es aus. Für reine Layout-Anpassungen sind CSS-Regeln mit @media print fast immer die robustere Lösung.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, hier immer `"afterprint"`.
$handler Pflicht	(event: Event) => void		Callback-Funktion, die ein einfaches `Event`-Objekt erhält (`event.type === "afterprint"`).
$options	boolean \| AddEventListenerOptions	false	Optionen wie `once`, `signal` oder `capture`. Mit `{ once: true }` läuft der Handler nur ein einziges Mal.

Beispiele

Druckanpassungen mit beforeprint/afterprint vornehmen und zurücksetzen

const details = document.querySelectorAll('details');
const warenOffen = new Map();

window.addEventListener('beforeprint', () => {
  // Alle eingeklappten Bereiche für den Druck öffnen
  details.forEach((el) => {
    warenOffen.set(el, el.open);
    el.open = true;
  });
});

window.addEventListener('afterprint', () => {
  // Ursprünglichen Zustand wiederherstellen
  details.forEach((el) => {
    el.open = warenOffen.get(el);
  });
  console.log('Druckansicht zurückgesetzt');
});

Druckansicht zurückgesetzt

Über die on-Property registrieren und wieder entfernen

window.onafterprint = (event) => {
  console.log(`Ereignis: ${event.type}`);
  // Nur einmal reagieren, danach Handler entfernen
  window.onafterprint = null;
};

window.print();

Ereignis: afterprint

Handler mit removeEventListener abmelden

const druckProtokoll = () => {
  console.log('Druckdialog geschlossen um', new Date().toLocaleTimeString('de-DE'));
};

window.addEventListener('afterprint', druckProtokoll);

// Später, z. B. beim Verlassen einer Single-Page-Ansicht:
const ansichtVerlassen = () => {
  window.removeEventListener('afterprint', druckProtokoll);
};

ansichtVerlassen();

Druck-Popup nach dem Drucken automatisch schließen

const druckeBeleg = (html) => {
  const popup = window.open('', 'beleg', 'width=600,height=800');
  if (!popup) return; // Popup-Blocker aktiv

  popup.document.body.innerHTML = html; // nur vertrauenswürdiges HTML verwenden!
  popup.addEventListener('afterprint', () => popup.close(), { once: true });
  popup.focus();
  popup.print();
};

document.querySelector('#beleg-drucken')?.addEventListener('click', () => {
  druckeBeleg('<h1>Beleg Nr. 4711</h1><p>Summe: 49,90 €</p>');
});

// Wichtig · Fallstricke

Kein Druck-Nachweis: afterprint feuert auch, wenn der Nutzer den Dialog abbricht. Ob wirklich gedruckt wurde, lässt sich mit keiner Web-API feststellen.
Zeitpunkt je nach Browser verschieden: Chrome und Firefox lösen das Ereignis nach dem Schließen des Druckdialogs aus. Ältere Safari-Versionen haben es teilweise schon früher ausgelöst. Safari unterstützt beforeprint/afterprint erst ab Version 13. Für ältere Browser kann man window.matchMedia('print') mit einem change-Listener als Ausweichlösung nutzen.
window.print() blockiert: In vielen Browsern hält print() das Skript an, solange der Dialog offen ist. afterprint kann deshalb noch vor der Codezeile nach print() ausgelöst werden. Verlass dich nicht auf eine bestimmte Reihenfolge.
Lieber CSS verwenden: Reine Darstellungsänderungen gehören in @media print. Nutze die Ereignisse nur, wenn JavaScript wirklich nötig ist, etwa um Canvas-Diagramme neu zu zeichnen.
Mobile Browser: Auf einigen mobilen Plattformen (z. B. iOS über das Teilen-Menü) werden die Ereignisse nicht zuverlässig ausgelöst.
Sicherheit: Wenn du Inhalte über innerHTML in ein Druck-Popup schreibst, entstehen XSS-Risiken. Nutzereingaben vorher bereinigen oder textContent verwenden.

Siehe auch

Window.print() Window.matchMedia() EventTarget.addEventListener() EventTarget.removeEventListener() Window HTMLVideoElement: resize