Wie bekommt man WYSIWYP (Print what you see) in einem Webbrowser?

Chrome hat diese Funktion in die Entwicklertools eingebaut, allerdings an einer sehr unscheinbaren Stelle.

• Öffnen Sie die Entwicklertools (Windows: F12 oder Strg+Umschalt+I, Mac: Cmd+Opt+I)
• Klicken Sie auf die Hamburger-Menü-Schaltfläche Anpassen und Steuern der DevTools und wählen Sie Weitere Tools > Rendering-Einstellungen (oder Rendering in neueren Versionen).
• Aktivieren Sie das Kontrollkästchen Druckmedien emulieren auf der Registerkarte Rendering und wählen Sie den Medientyp Bildschirm.

Quoted mostly from this answer . Siehe unten für den Unterschied.

Wenn Sie nun drucken, wird der Ausdruck genau das sein, was Sie sehen. Stellen Sie sicher, dass Sie die Entwicklertools geöffnet lassen, bis Sie drucken. Sobald Sie die Entwicklertools schließen, wird die Rendering-Einstellung wieder auf normal zurückgesetzt.

Hinweis: Die Inspiration für diese Antwort kam von https://superuser.com/a/568847/176146 . Aber der eigentliche Text dieser Antwort stammt aus lmeurs ’ answer . Es ist fast genau dasselbe, aber wir versuchen, das genaue Gegenteil ihrer Antwort zu tun, so dass anstelle der Einstellung des Override auf Print es auf Screen eingestellt ist.

Warum drucken meine Webseiten nicht das, was ich in meinem Browser sehe?

Der Grund, warum einige Ihrer Webseiten anders drucken, ist, dass sie ein Druck-Stylesheet haben.

Was ist ein Druck-Stylesheet?

Ein Print-Stylesheet formatiert eine Webseite so, dass sie beim Drucken automatisch in einem benutzerfreundlichen Format ausgedruckt wird. Print-Stylesheets gibt es schon seit einigen Jahren und es wurde schon viel darüber geschrieben. Dennoch implementieren nur wenige Webseiten sie, was bedeutet, dass wir mit Webseiten zurückgelassen werden, die frustrierenderweise nicht richtig auf Papier gedruckt werden.

Es ist bemerkenswert, dass so wenige Webseiten Druck-Stylesheets verwenden:

• Print-Stylesheets verbessern die Benutzerfreundlichkeit enorm, besonders für Seiten mit viel Inhalt (wie diese hier!)
• Sie sind phänomenal schnell und einfach einzurichten

Einige Websites bieten einen Link zu einer druckfreundlichen Version der Seite, aber dieser muss natürlich eingerichtet und gepflegt werden. Außerdem ist es erforderlich, dass die Benutzer diesen Link auf dem Bildschirm bemerken und ihn dann vor der regulären Art und Weise, wie sie Seiten ausdrucken (z. B. durch Auswahl der Schaltfläche “Drucken” am oberen Rand des Bildschirms), verwenden. Druckfreundliche Versionen sind jedoch nützlich, wenn mehrere Webseiten gleichzeitig gedruckt werden sollen, z. B. ein Artikel, der sich über mehrere Webseiten erstreckt.

Quelle Druck-Stylesheets (CSS) beim Drucken einer Website deaktivieren

Wie kann ich ein Druck-Stylesheet deaktivieren?

Ich brauchte kürzlich einen Schnappschuss einer Website genau so, wie sie auf meinem Bildschirm angezeigt wird. Das heißt, ich wollte die Hintergrundfarbe, ich wollte die Anzeigen, ich wollte das komplette Layout.

Eine Möglichkeit ist, nacheinander Screenshots zu machen, während man die Seite herunter scrollt, und sie dann in Photoshop wieder zusammenzusetzen. Dies ist zeitaufwändig und führt zu einem Bild mit niedriger Auflösung (72 dpi).

Eine andere Möglichkeit ist, die Seite zu drucken und dann als PDF zu speichern, anstatt sie zu drucken. Dies funktioniert recht gut für Seiten, die kein unterschiedliches Layout für den Druck einer Seite gegenüber der Anzeige der Seite definieren.

Leider wird es immer beliebter, ein “Druck”-Stylesheet in eine Website einzubinden, das neue Seitenstile definiert, wenn ein Benutzer versucht, die Website zu drucken. Dieses wird im Header definiert und sieht in etwa so aus:

Ich habe nur eine Option gefunden, die meinen Bedürfnissen wirklich gerecht wird: Das “Web Developer”-Add-on / die Erweiterung, die von Chris Pederick entwickelt wurde

Mit diesem Plugin können Sie sehr einfach ALLE Stile, Standardstile, Inline-Stile, eingebettete Stile und, Sie haben es erraten, Druckstile deaktivieren!

Es ist derzeit für Firefox und Chrome verfügbar. Ich hoffe wirklich, dass es eines Tages eine Erweiterung für Safari geben wird, da ich hauptsächlich Safari benutze. Die einzige Option, die ich für Safari gefunden habe, ist, ALLE Stile zu deaktivieren - eine Funktion, die standardmäßig mit der neuesten Version (5.0.3) des Browsers kommt. Dies ist während der Entwicklung nützlich, um zu sehen, wie Ihre Website in einem reinen Textbrowser angezeigt wird, aber ohne die Möglichkeit, auszuwählen, welche Stile Sie deaktivieren, ist es nur begrenzt nützlich.

Hier ist ein Beispiel für die Deaktivierung von Druckstilen mit der obigen Erweiterung in Firefox:

Quelle Print Stylesheet - the definitive guide

Eine Lösung ohne Plug-in für Firefox: Öffnen Sie die Web-Entwickler-Tools, setzen Sie in den Standard-Entwickler-Tools (Zahnrad-Symbol) einen Haken bei “Screenshot der gesamten Seite erstellen”. Diesen Teil müssen Sie nur einmal ausführen.

Klicken Sie dann in den Entwicklertools auf das Kamerasymbol. Die gesamte Seite wird als .png-Datei gespeichert. Von hier aus können Sie sie drucken, in eine PDF-Datei konvertieren usw.

Ich verwende die Chrome-Erweiterung: Webseiten-Screenshot . Mit zwei Klicks wird die komplette Webseite in jpg oder pdf umgewandelt. Man muss die Screenshots nicht mehr selbst zusammenkleben. Die Seite sieht dann so aus:

Ich stand auch vor einem ähnlichen Problem. Derzeit benutze ich Print Friendly and PDF Extenstion for Chrome .

Die beste Funktion ist, dass ich die Elemente, die ich nicht in meinem Print/PDF haben möchte, manuell löschen kann.

(Auf die Gefahr hin, dies in eine Reihe von Software-Empfehlungen Antworten zu verwandeln, aber bisher scheint installiere und verwende Browser-Erweiterung X die einzige Art von Antwort zu sein, die tatsächlich funktioniert:)

In letzter Zeit benutze ich die Screenshot öffnen Chrome-Erweiterung für diesen Zweck, und ich bin sehr zufrieden damit. Sie hatte keine Probleme mit einer langen Quora-Seite .

_Update (November, 2017): dies ist nicht mehr die beste Option: Firefox und Chrome unterstützen jetzt das Erstellen von ganzseitigen Screenshots in ihren Entwicklertools _.

Heute geht das im Firefox (ich benutze gerade 65.0.2) wie folgt:

1. Drücken Sie F12. Das Fenster “Entwicklertools” wird eingeblendet.
2. In der rechten oberen Ecke befindet sich ein Kamerasymbol. Klicken Sie darauf, um einen Screenshot von der gesamten Seite zu machen.

In den Einstellungen (um sie aufzurufen, klicken Sie auf die drei Punkte rechts neben dem Kamera-Symbol) können Sie das Verhalten leicht anpassen; standardmäßig wird der Screenshot in Ihrem Firefox-Download-Ordner gespeichert.

Wenn das Kamerasymbol fehlt, müssen Sie es zunächst in den Einstellungen aktivieren.

Hier ist eine weitere namens OpenScreenShoot . Ich liebe es, weil es Open Source ist, auf GitHub verfügbar ist und es bei mir für eine sehr lange Webseite funktionierte, bei der andere Alternativen wie WebpageScreenShot versagten.