Window.print() — Methode · JavaScript-Referenz

Signatur

Window.prototype.print()

Beschreibung

window.print() öffnet den systemeigenen Druckdialog für das aktuelle Dokument. Über ihn können Nutzer die Seite auf einem Drucker ausgeben oder, je nach Browser, als PDF speichern. Die Methode hat keine Parameter. Seitenränder, Papierformat oder den Zieldrucker kann man per JavaScript nicht festlegen, diese Einstellungen trifft der Nutzer im Dialog.

Typische Einsatzfälle sind „Drucken“-Schaltflächen auf Rechnungen, Tickets, Rezepten oder Berichten. Wie die Druckausgabe aussieht, steuert man mit CSS über @media print oder <link media="print">. So lassen sich zum Beispiel Navigation und Werbung ausblenden und Seitenumbrüche mit break-before oder break-inside steuern. Das Seitenformat legt man mit @page fest.

In den meisten Browsern blockiert der Aufruf, solange der Dialog offen ist: Die Ausführung von JavaScript hält an und läuft erst weiter, wenn der Dialog geschlossen wurde. Ob tatsächlich gedruckt oder abgebrochen wurde, lässt sich nicht feststellen. Um den Druckvorgang herum kann man auf die Ereignisse beforeprint und afterprint reagieren, etwa um Inhalte vor dem Druck anzupassen und danach wiederherzustellen.

Rückgabewert

Typ

void

Beschreibung

Gibt undefined zurück. Ob der Nutzer gedruckt oder abgebrochen hat, erfährt man nicht.

Beispiele

Drucken-Schaltfläche

// HTML: <button id="print-btn">Rechnung drucken</button>
const button = document.querySelector('#print-btn');

button.addEventListener('click', () => {
  window.print();
});

Inhalte vor und nach dem Druck anpassen

const originalTitle = document.title;

window.addEventListener('beforeprint', () => {
  // Der Titel erscheint in vielen Browsern in der Kopfzeile bzw. als PDF-Dateiname
  document.title = `Rechnung-${new Date().toISOString().slice(0, 10)}`;
  document.querySelectorAll('details').forEach((d) => (d.open = true));
});

window.addEventListener('afterprint', () => {
  document.title = originalTitle;
  console.log('Druckdialog geschlossen');
});

window.print();

Druckdialog geschlossen

Nur einen bestimmten Bereich über ein verstecktes iframe drucken

const printSection = (selector) => {
  const content = document.querySelector(selector);
  const iframe = document.createElement('iframe');
  iframe.style.position = 'fixed';
  iframe.style.width = '0';
  iframe.style.height = '0';
  iframe.style.border = '0';
  document.body.append(iframe);

  const doc = iframe.contentDocument;
  doc.open();
  doc.write(`<!DOCTYPE html><html><head><title>Druck</title></head><body></body></html>`);
  doc.close();
  // Inhalt sicher klonen statt als HTML-String einzufügen
  doc.body.append(doc.importNode(content, true));

  iframe.contentWindow.addEventListener('afterprint', () => iframe.remove());
  iframe.contentWindow.focus();
  iframe.contentWindow.print();
};

printSection('#ticket');

Druckansicht per CSS steuern (ergänzend)

// Druck-Stylesheet dynamisch hinzufügen und anschließend drucken
const style = document.createElement('style');
style.textContent = `
  @media print {
    nav, footer, .no-print { display: none !important; }
    a[href]::after { content: " (" attr(href) ")"; }
    @page { margin: 15mm; }
  }
`;
document.head.append(style);

window.print();

// Wichtig · Fallstricke

Blockierend: In den meisten Browsern hält print() die Skriptausführung an, bis der Dialog geschlossen ist. Code direkt nach dem Aufruf läuft daher erst danach. Für saubere Nachbereitung besser afterprint verwenden.
Kein Ergebnis: Ob wirklich gedruckt, als PDF gespeichert oder abgebrochen wurde, lässt sich nicht ermitteln.
Nutzeraktion empfohlen: Browser können Druckdialoge unterdrücken, die ohne Nutzerinteraktion oder wiederholt aufgerufen werden (Missbrauchsschutz). Ruf print() deshalb am besten aus einem Klick-Handler auf.
Sandbox-iframes: In einem <iframe sandbox> wird print() ohne das Token allow-modals stillschweigend ignoriert.
Ladezustand: Beim Druck neu geöffneter Fenster oder iframes erst auf load warten, sonst fehlen Bilder oder Schriften.
Mobil: Auf iOS und Android wird der Druckdialog des Betriebssystems bzw. ein Teilen-Dialog angezeigt. In manchen WebViews tut print() gar nichts.
Sicherheit: Wenn du Druckinhalte über document.write oder innerHTML in ein iframe schreibst, darfst du keine ungeprüften Nutzerdaten einfügen (XSS). DOM-Knoten zu klonen ist sicherer.

Siehe auch

Window.open() Window.alert() Window new PageSwapEvent() Window.find()