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

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

Das Drucken nur bestimmter HTML-Inhalte beim Klicken auf eine Schaltfläche durch einen Benutzer kann auf verschiedene Weise 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:

<code class="javascript">// 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';</code>

Mit dieser Lösung können Sie bestimmte HTML-Inhalte bequem per Knopfdruck drucken, ohne dass dies erforderlich ist Ändern des Erscheinungsbilds oder Inhalts der Hauptwebseite. Dadurch wird sichergestellt, dass nur der vorgesehene HTML-Code gedruckt wird, was ein benutzerfreundlicheres Druckerlebnis bietet.

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