Drucken spezifischer HTML-Inhalte beim Klicken auf eine Schaltfläche, ohne die gesamte Webseite einzubeziehen

Das Drucken nur spezifischer HTML-Inhalte beim Klicken auf eine Schaltfläche durch einen Benutzer kann auf verschiedene Arten erreicht werden Wege. Eine Methode besteht darin, ein verstecktes div-Element zu erstellen, das den gewünschten HTML-Code enthält. Die Anzeigeeigenschaft dieses Divs sollte für Druckzwecke auf „print“ gesetzt sein, während sein Anzeigewert für die Bildschirmanzeige auf „none“ bleibt. Die Anzeigeeigenschaften anderer Elemente auf der Seite können so angepasst werden, dass sie auf dem Bildschirm angezeigt, beim Drucken jedoch ausgeblendet werden. Diese Methode erfordert jedoch eine sorgfältige Verwaltung der Anzeigeeigenschaften aller Seitenelemente.

Ein alternativer Ansatz besteht darin, eine neue, isolierte Webseite zu erstellen, die ausschließlich den zu druckenden HTML-Inhalt enthält. Diese neue Seite kann dynamisch in einen versteckten Iframe geladen werden, wenn der Benutzer auf die Schaltfläche „Drucken“ klickt. Sobald der Iframe vollständig geladen ist, kann die Druckfunktion des Browsers ausgelöst werden und der eingebettete HTML-Code wird ohne unerwünschte Seitenelemente gedruckt. Diese Methode bietet mehr Flexibilität und dynamische Kontrolle über den Druckprozess.

Hier ist ein Beispiel für den zweiten Ansatz:

// Create an invisible iframe to hold the print-only HTML
const printFrame = document.createElement('iframe');
printFrame.style.display = 'none';
document.body.appendChild(printFrame);

// Dynamically load the print-only HTML into the iframe
printFrame.onload = function() {
  // Trigger the browser's print function once the print-only page is loaded
  window.print();
}
printFrame.src = 'print-only.html';

Mit dieser Lösung können Sie bestimmte HTML-Inhalte bequem per Knopfdruck drucken, ohne das Erscheinungsbild oder den Inhalt der Hauptwebseite zu ändern. Dadurch wird sichergestellt, dass nur der vorgesehene HTML-Code gedruckt wird, was ein benutzerfreundlicheres Druckerlebnis bietet.