Wie drucke ich beim Klicken auf die Schaltfläche nur ausgewählte HTML-Inhalte aus?

HTML-Inhalte selektiv auf Schaltflächenklick drucken

Webentwickler sehen sich häufig mit der Notwendigkeit konfrontiert, Benutzern das Drucken bestimmter Abschnitte einer Webseite zu ermöglichen, ohne diese einzuschließen den gesamten Seiteninhalt. In diesem Zusammenhang stellt sich die Frage:

Wie können wir beim Klicken auf eine Schaltfläche nur ausgewählte HTML-Inhalte drucken und den Rest der Seite ausschließen?

Lösung:

Die vorgeschlagene Lösung, um den versteckten HTML-Inhalt in einem display: print div beizubehalten, ist ein gültiger Ansatz. Es gibt jedoch eine einfachere und effizientere Methode:

Erstellen Sie ein Druck-Stylesheet:

1. Erstellen Sie eine CSS-Datei mit dem Namen „print.css“, die Folgendes enthält Code:

<code class="css">@media print {
  .noPrint {
    display: none;
  }
}</code>

Dieser Code verbirgt Elemente mit der Klasse „noPrint“, wenn die Seite gedruckt wird.

2. Wenden Sie die NoPrint-Klasse an:

Identifizieren Sie den HTML-Inhalt, der nicht gedruckt werden soll, und fügen Sie die Klasse „noPrint“ zu diesen Elementen hinzu, wie zum Beispiel:

<code class="html"><h1 class="noPrint">No Print</h1></code>

3. Fügen Sie die ein Stylesheet drucken:

Fügen Sie die folgende Zeile zum hinzu. Abschnitt Ihres HTML-Dokuments:

<code class="html"><link rel="stylesheet" href="print.css" media="print"></code>

4. Drucken-Schaltfläche hinzufügen:

Erstellen Sie eine Schaltfläche, die beim Klicken den Druckdialog auslöst:

<code class="html"><button onclick="window.print()">Print</button></code>

Erklärung:

Wenn auf die Schaltfläche „Drucken“ geklickt wird, wird die Methode window.print() aufgerufen und der Druckdialog des Browsers geöffnet. Die CSS-Medienabfrage @media print { ... } wird ausgelöst, wodurch die Elemente mit der Klasse „noPrint“ ausgeblendet werden. Dadurch wird nur der gewünschte HTML-Inhalt gedruckt.

Das obige ist der detaillierte Inhalt vonWie drucke ich beim Klicken auf die Schaltfläche nur ausgewählte HTML-Inhalte aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!