Wie kann ich bestimmte HTML-Elemente beim Klicken auf eine Schaltfläche drucken, ohne die gesamte Seite zu drucken?

HTML-Element beim Klicken auf eine Schaltfläche drucken, ohne die Seite zu drucken

In diesem Szenario suchen Sie nach einer Methode zum Drucken von HTML-Inhalten, die durch eine Schaltfläche ausgelöst werden klicken, ohne dass die gesamte Webseite in der Druckausgabe erfasst wird. Ziehen Sie die folgende Lösung in Betracht:

CSS-Druckmedienregel

Mit der CSS-Druckmedienregel können Sie Inhalte selektiv ausschließlich für Druckzwecke anzeigen. So können Sie dies umsetzen:

<code class="css">/* CSS file */

@media print {
  /* Hide any element you don't want to print */
  .noPrint {
    display: none;
  }

  /* Set elements you want to print to display */
  h1 {
    color: #f6f6;
  }
}

/* Elements in the HTML page */

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

Erklärung

• Die @media-Druckregel definiert Stile, die für die Druckmedien spezifisch sind.
• Elemente mit der Klasse noPrint werden beim Drucken ausgeblendet (mit display: none).
• Das

  Das Element, das den Inhalt enthält, den Sie drucken möchten, ist so eingestellt, dass es in den Druckmedien angezeigt wird, und hat eine charakteristische Farbe.

• Wenn auf die Schaltfläche „Drucken“ geklickt wird, wird window.print() aufgerufen, um die geänderte Seite zu drucken , das jetzt nur die gewünschten Elemente enthält.

Vorteile

• Vermeidet das Drucken unerwünschter Inhalte.
• Sorgt für ein sauberes und übersichtliches Erscheinungsbild Druckausgabe.
• Ermöglicht eine flexible Inhaltssteuerung und stellt sicher, dass nur relevante Informationen gedruckt werden.

Das obige ist der detaillierte Inhalt vonWie kann ich bestimmte HTML-Elemente beim Klicken auf eine Schaltfläche drucken, ohne die gesamte Seite zu drucken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!