Wie kann man nur das Rezept drucken?
- Einleitung
- Rezept genau identifizieren
- Nur das Rezept drucken mit CSS
- JavaScript-Lösungen für dynamisches Drucken
- Fazit
Einleitung
Oft möchte man beim Drucken einer Webseite nicht die gesamte Seite, sondern nur einen bestimmten Teil, wie zum Beispiel ein Rezept, ausdrucken. Dies ist besonders nützlich, wenn die Webseite viele andere Inhalte wie Werbung, Navigation oder Kommentare enthält, die beim Ausdrucken störend sind. In diesem Artikel erkläre ich, wie man speziell nur das Rezept einer Webseite drucken kann.
Rezept genau identifizieren
Der erste Schritt besteht darin, den Bereich der Webseite zu finden, der das gewünschte Rezept enthält. In HTML werden Inhalte meistens in bestimmten Containerelementen wie <div> oder <section> mit Klassen- oder ID-Namen strukturiert. Wenn Sie die Entwicklerwerkzeuge des Browsers öffnen (meist über F12 oder Rechtsklick > "Element untersuchen"), können Sie den Container mit dem Rezept ausfindig machen. Beispielsweise könnte das Rezept in einem <div id="rezept"> oder einer Klasse wie "recipe" stehen.
Nur das Rezept drucken mit CSS
Um lediglich das Rezept auszudrucken, kann man mit CSS eine Druckansicht gestalten. Dazu nutzt man sogenannte media queries mit dem Attribut @media print. Im Druckmodus kann man alle Elemente ausblenden, außer dem gewünschten Rezept-Container. Hier ein einfaches Beispiel: Im Druckstil setzt man display: none für alle Elemente auf der Seite und display: block für den Container, der das Rezept enthält.
Wenn Sie Zugriff auf den Quellcode der Webseite haben, können Sie den entsprechenden CSS-Code hinzufügen. Ist das nicht möglich, gibt es Browsererweiterungen oder spezielle Skripte, mit denen man eigene Druckstile laden kann. Alternativ lässt sich das Rezept auch per Copy & Paste in ein neues Dokument übertragen und dann gedruckt werden.
JavaScript-Lösungen für dynamisches Drucken
Ein weiterer Weg ist die Verwendung von JavaScript, um beim Drucken nur das Rezept anzuzeigen. Dabei wird beim Auslösen des Druckbefehls der restliche Seiteninhalt temporär ausgeblendet und nur das Rezept sichtbar gemacht. Nach dem Druck wird die Seite wieder in den ursprünglichen Zustand versetzt. Dieses Vorgehen erfordert programmiertechnische Kenntnisse und Zugriff auf die Webseitengestaltung.
Fazit
Das gezielte Drucken nur des Rezepts auf einer Webseite ist durch das Identifizieren des Rezept-Containers und das Anwenden von speziellen Druckstilen mittels CSS oder JavaScript möglich. Für einfache Anwendungen ist der Einsatz einer maßgeschneiderten Druck-CSS-Regel die beste Lösung, während für komplexere Seiten JavaScript hilfreich sein kann. Falls all das nicht umsetzbar ist, kann das manuelle Kopieren des Rezepts in ein neues Dokument eine einfache Alternative sein.