So drucken Sie bestimmte HTML-Inhalte mit einem Klick auf eine Schaltfläche

Wenn Sie bestimmte HTML-Inhalte per Klick auf eine Schaltfläche drucken möchten, ist es wichtig, das Drucken zu vermeiden gesamte Webseite. Hier ist ein umfassender Ansatz:

Nutzung von Medienabfragen

Die Betonung der Medienabfrage für den Druck in CSS ist eine saubere Lösung:

@media print {
  .noPrint {
    display: none;
  }
}

Dadurch werden beim Drucken Elemente mit der Klasse „noPrint“ ausgeblendet.

CSS-Selektoren anwenden

Bestimmen Sie die Elemente, die Sie drucken möchten, mit spezifischem CSS Selektoren, wie zum Beispiel:

  print me


  no print

Implementieren eines Schaltflächenklickereignisses

Hängen Sie ein Klickereignis an Ihre Schaltfläche an, um den Druck zu starten:

  Print Me

Vorteile

Diese Methode verbirgt effektiv unrelevante Elemente beim Drucken, sorgt für Klarheit und vermeidet Unordnung. Es behält auch das Erscheinungsbild der Website bei der Bildschirmanzeige bei und verbessert so das Benutzererlebnis.