Wie drucke ich bestimmte HTML-Inhalte, ohne die Anzeige der Seite zu beeinträchtigen?

Drucken spezifischer HTML-Inhalte, ohne die Seitenanzeige zu beeinträchtigen

Bei der Webentwicklung kann es vorkommen, dass Sie bestimmte HTML-Inhalte drucken müssen, wenn auf eine Schaltfläche geklickt wird, ohne dass dies der Fall ist Dadurch wird die aktuelle Anzeige der Seite gestört. Es gibt verschiedene Lösungen, darunter die von Ihnen erwähnte: Platzieren des Inhalts in einem versteckten Div.

Ein effizienterer Ansatz kann jedoch mithilfe von CSS-Medienabfragen erreicht werden:

@media print {
  .noPrint{
    display:none;
  }
}
h1{
  color:#f6f6;
}

Hier a Die Klasse „noPrint“ wird auf Elemente angewendet, die nicht gedruckt werden sollen. Wenn das Druckdialogfeld geöffnet wird, werden die im @media-Druckblock definierten Stile angewendet, wodurch diese Elemente ausgeblendet werden, während das ursprüngliche Erscheinungsbild der Webseite erhalten bleibt.

<h1>
print me
</h1>
<h1 class="noPrint">
no print
</h1>
<button onclick="window.print();" class="noPrint">
Print Me
</button>

In diesem Code die Überschrift „Drucke mich“. gedruckt, während Elemente mit der Klasse „noPrint“ ausgeblendet werden. Diese Methode ermöglicht eine größere Flexibilität und Kontrolle über die Druckausgabe und stellt sicher, dass nur der beabsichtigte Inhalt an den Drucker gesendet wird.

Das obige ist der detaillierte Inhalt vonWie drucke ich bestimmte HTML-Inhalte, ohne die Anzeige der Seite zu beeinträchtigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!