Seite drucken in HTML

1. Ausblenden des Inhalts mit display:none innerhalb von @media print zum Drucken eines bestimmten Inhalts in HTML
2. Übergabe der id an den onClick Event Listener, um einen bestimmten Inhalt in HTML zu drucken

Dieser Artikel stellt einige Methoden vor, um den spezifischen Inhalt einer Seite in HTML zu drucken.

Ausblenden des Inhalts mit display:none innerhalb von @media print zum Drucken eines bestimmten Inhalts in HTML

Wir können CSS verwenden, um das Aussehen der Webseite zu ändern, wenn sie auf Papier gedruckt wird. Wir können einen CSS-Stil im Web und einen anderen CSS-Stil beim Drucken der Webinhalte festlegen.

Mit der CSS-Regel @media print können Sie den Stil von HTML-Inhalten beim Drucken ändern.

Zum Drucken der HTML-Inhalte benötigen wir JavaScript. Mit der Methode window.print() können Sie das aktuelle Fenster drucken.

Die Methode print() öffnet das Dialogfeld Print, in dem Sie bevorzugte Druckoptionen auswählen können. Wir können window.print() aufrufen, nachdem wir auf eine Schaltfläche geklickt haben, um das aktuelle Fenster zu drucken.

Mit @media print können wir für die HTML-Inhalte, die wir nicht drucken wollen, die Eigenschaft display auf none setzen. Dadurch werden die HTML-Inhalte nicht in der Druckoption angezeigt, obwohl diese Inhalte im Web vorhanden sind.

Erstellen Sie beispielsweise in HTML zwei Überschriften mit dem Tag h1. Benennen Sie die erste Überschrift als Muss gedruckt werden und die zweite Überschrift als Muss nicht gedruckt werden.

Geben Sie den Klassennamen für die zweite Überschrift als dontPrint an. Erstellen Sie dann einen Button und nennen Sie ihn Drucken.

Geben Sie dieser Schaltfläche auch den Klassennamen dontPrint. Erstellen Sie einen onClick-Listener für die Schaltfläche und rufen Sie die Methode window.print() auf, wenn auf die Schaltfläche geklickt wird.

Setzen Sie im CSS-Abschnitt innerhalb von @media print die display-Eigenschaft der Klasse namens dontPrint auf none.

Das folgende Beispiel zeigt, dass die Überschrift und Schaltfläche mit dem Klassennamen dontPrint im Druckbereich nicht angezeigt wird, wenn die Schaltfläche Print angeklickt wird.

Beispielcode:

<h1>
  Need to print this
</h1>
<h1 class="dontPrint">
  Don't need to print this
</h1>
<button onclick="window.print();" class="dontPrint">
  Print
</button>

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

Übergabe der id an den onClick Event Listener, um einen bestimmten Inhalt in HTML zu drucken

Bei dieser Methode können wir eine id des spezifischen zu druckenden Inhalts erstellen. Dann können wir die id mit Hilfe des onClick-Event-Listeners an eine JavaScript-Funktion übergeben.

Das JavaScript druckt den angegebenen Inhalt mit der Methode window.print().

Die Eigenschaft innerHTML setzt oder gibt den HTML-Inhalt eines Elements zurück. Wir können es verwenden, um den in JavaScript gedruckten Inhalt zusammen mit der Methode document.getElementById() auszuwählen.

In ähnlicher Weise können wir den ursprünglichen Inhalt des HTML-Dokuments mithilfe der Eigenschaft innerHTML zusammen mit der Eigenschaft document.body beibehalten. Nach dem Drucken des Inhalts können wir den ursprünglichen Inhalt des HTML-Dokuments in der Eigenschaft document.body.innerHTML setzen.

Sehen wir uns die folgenden Anweisungen an, um es klarer zu verstehen.

Erstellen Sie zum Beispiel ein div und geben Sie ihm eine id von printIt. Erstellen Sie in diesem div ein h1-Tag und schreiben Sie Need to print this hinein.

Erstellen Sie außerhalb des div einen button und nennen Sie ihn Print. Erstellen Sie einen onclick-Listener für die Schaltfläche und rufen Sie die printOut-Funktion mit der printIt-ID als Parameter auf.

Erstellen Sie im Abschnitt JavaScript eine Funktion namens printOut mit einem Argument divId. Erstellen Sie eine Variable namens printOutContent, um innerHTML der divId zu speichern.

Erstellen Sie als Nächstes eine weitere Variable originalContent, um die innerHTMl des HTML-Bodys zu speichern. Die Demonstration ist unten gezeigt.

var printOutContent = document.getElementById(divId).innerHTML;
var originalContent = document.body.innerHTML;

Als nächstes setzen Sie innerHTML des Körpers auf die Variable printOutContent.

Rufen Sie dann die Methode window.print() auf. Setzen Sie nach Aufruf der Methode innerHTML des Bodys auf die Variable originalContent.

document.body.innerHTML = printOutContent;
window.print();
document.body.innerHTML = originalContent;

Wenn wir hier die Methode window.print() aufrufen, druckt sie nur den Abschnitt der ID divId, da document.body.innerHTML nur das zu druckende Element enthält. Nachdem der Inhalt gedruckt wurde, wird der Inhalt des gesamten HTML-Dokuments in seinen ursprünglichen Zustand versetzt.

Wir haben also einen bestimmten Inhalt eines HTML-Dokuments mit JavaScript ausgedruckt.

Beispielcode:

<div id="printIt">
  <h1>
    Need to Print this
  </h1>
</div>
<button onClick="printOut('printIt')">
  Print
</button>

function printOut(divId) {
  var printOutContent = document.getElementById(divId).innerHTML;
  var originalContent = document.body.innerHTML;
  document.body.innerHTML = printOutContent;
  window.print();
  document.body.innerHTML = originalContent;
}