Vorteile

• Ihre Seite bleibt nach dem Drucken interaktiv
• Spielt gut mit Frameworks
• Sie müssen Ihre Benutzeroberfläche nicht zum Drucken duplizieren

Schritte

1. Im Druckmodus jeden Inhalt der Seite ausblenden
2. Machen Sie Ihr Zielelement im Druckmodus sichtbar

Schritt 1

@media print {
  body {
    visibility: hidden;
  }
}

Schritt 2

@media print {
  #section-to-print {
    top: 0;
    left: 0;
    position: absolute;
    visibility: visible;
  }
}

Dann drucken

const button = document.querySelector('print-page');

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

Diese Methode vermeidet die Gefahr, dass die Interaktivität verloren geht. Andere Methoden ersetzen den gesamten Seiteninhalt durch den statischen HTML-Code und verlieren dadurch die Interaktivität.

const printContents = document.getElementById(divId).innerHTML;
const originalContents = document.body.innerHTML;

document.body.innerHTML = printContents;

window.print();

document.body.innerHTML = originalContents;