Wie kann ich mithilfe von CSS nur ein bestimmtes Div auf einer Webseite drucken?

Bestimmte Inhalte auf einer Webseite drucken

Nur ​​ein bestimmtes Div auf einer Webseite zu drucken, ohne andere Inhalte zu beeinträchtigen, kann eine herausfordernde Aufgabe sein. Um dieses Problem anzugehen, wird unten ein effektiver Ansatz unter Verwendung von CSS vorgestellt:

CSS-Lösung:

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

Erklärung:

Dieser CSS-Code verwendet die @media-Druckregel, um Stile speziell auf die Druckvorschau anzuwenden. Es funktioniert wie folgt:

1. Ausblenden des gesamten Seitenkörpers (mit Ausnahme des zu druckenden Div), indem seine Sichtbarkeit auf „Ausgeblendet“ gesetzt wird.
2. Festlegen der Sichtbarkeit des Ziel-Div ( #section-to-print) sichtbar machen.
3. Positionieren Sie das Ziel-Div absolut oben links auf der Seite (links: 0; oben: 0;), um dies sicherzustellen wird korrekt gedruckt.

Alternative Ansätze:

Die Verwendung der Anzeige zum Ausblenden von Inhalten scheint zwar eine Option zu sein, kann jedoch eine Herausforderung darstellen, da jedes mit der Anzeige ausgeblendete Element: keiner wird auch seine Nachkommen verbergen. Dies kann eine erhebliche Seitenumstrukturierung erfordern.

Vorteile dieser Lösung:

Diese reine CSS-Lösung:

• Ermöglicht Ihnen das selektive Drucken Nur das gewünschte Div, ohne andere Seitenelemente zu deaktivieren.
• Vermeidet die Erstellung eines neuen Fensters und gewährleistet so einen nahtlosen Druck Erfahrung.
• Behält den visuellen Stil des Ziel-Divs für den Druck bei, auch wenn die angewendeten Stile für die Webanzeige gedacht sind.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS nur ein bestimmtes Div auf einer Webseite drucken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!