Wie bekomme ich WYSIWYP in einen Webbrowser?

Wenn ich eine Webseite von meinem Browser aus drucke, erwarte ich, dass ich genau den Inhalt auf Papier bekomme, den ich im Browser sehe. Um genau zu sein: Ich erwarte, dass der Browser den gleichen Seiteninhalt auf die gleiche Weise wiedergibt, außer auf einer Leinwand mit unendlicher Höhe, und dann druckspezifisch entscheidet, wie die Ergebnisse auf physische Papierseiten verteilt werden.

Dies ist jedoch auf vielen Websites überhaupt nicht der Fall. Sie können etwas ganz anderes drucken. Ich habe nie nach Browsern gefragt, um dies zu tun, und ich möchte nicht, dass es passiert.

Gibt es eine Möglichkeit, das zu bekommen, was ich will (außer Screenshots zu machen, sie sorgfältig auszuschneiden und zusammenzufügen und die resultierenden Bilder zu drucken)? Gibt es eine Möglichkeit, einem von mir verwendeten Webbrowser (Firefox, Chrome, Safari, IE oder Opera) mitzuteilen: "Drucken Sie diese Seite so, als würden Sie sie in einem beliebig hohen Browserfenster rendern"?

(PS: Siehe auch: Drucken aus dem Browser mit Bildschirm-CSS ?)

Chrome hat diese Funktion in die Entwicklertools integriert, jedoch an einem sehr nicht offensichtlichen Ort.

• Öffnen Sie die Developer Tools (Windows: F12oder Ctrl+ Shift+ I, Mac: Cmd+ Opt+ I)
• Klicken Sie auf die Menüschaltfläche Anpassen und Steuern von DevTools Hamburger und wählen Sie Weitere Werkzeuge> Rendereinstellungen (oder Rendern in neueren Versionen).
• Aktivieren Sie das Kontrollkästchen Druckmedien emulieren auf der Registerkarte Rendern und wählen Sie den Medientyp Bildschirm .

Meist aus dieser Antwort zitiert . Siehe unten für den Unterschied.

Wenn Sie jetzt drucken, ist der Ausdruck genau das, was Sie sehen. Stellen Sie sicher, dass die Entwicklertools geöffnet sind, bis Sie drucken. Sobald Sie die Entwicklertools schließen, wird die Rendereinstellung auf den Normalwert zurückgesetzt.

Hinweis: Diese Antwort wurde von https://superuser.com/a/568847/176146 inspiriert . Aber der eigentliche Text der Antwort von lmeurs ' Antwort . Es ist fast genau das Gleiche, aber wir versuchen, das genaue Gegenteil ihrer Antwort zu erreichen. Statt die Überschreibung auf " Drucken" zu setzen, wird " Bildschirm" eingestellt .

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

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

Was ist ein Druck-Stylesheet?

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

Es ist bemerkenswert, dass so wenige Websites Print-Stylesheets wie folgt verwenden:

• Druckstylesheets verbessern die Benutzerfreundlichkeit enorm, insbesondere für Seiten mit viel Inhalt (wie diese!)
• Sie sind phänomenal schnell und einfach einzurichten

Einige Websites bieten einen Link zu einer druckerfreundlichen Version der Seite an, diese muss jedoch eingerichtet und gewartet werden. Außerdem müssen Benutzer diesen Link auf dem Bildschirm bemerken und ihn dann vor dem normalen Drucken von Seiten verwenden (z. B. durch Klicken auf die Schaltfläche "Drucken" oben auf dem Bildschirm). Druckfreundliche Versionen sind jedoch hilfreich, wenn mehrere Webseiten gleichzeitig gedruckt werden sollen, z. B. ein Artikel, der sich auf mehrere Webseiten erstreckt.

Quelle Deaktivieren Sie Print Stylesheets (CSS) beim Drucken einer Website

Wie deaktiviere ich ein Druck-Stylesheet?

Ich musste kürzlich einen Schnappschuss einer Website machen, die genau so ist, wie sie auf meinem Bildschirm angezeigt wird. Das heißt, ich wollte die Hintergrundfarbe, ich wollte die Anzeigen, ich wollte das vollständige Layout.

Eine Möglichkeit besteht darin, nacheinander Screenshots zu machen, während Sie die Seite nach unten scrollen, und diese dann in Photoshop wieder zusammenzufügen. Dies ist zeitaufwendig und hinterlässt ein Bild mit niedriger Auflösung (72 dpi).

Eine andere Möglichkeit besteht darin, die Seite zu drucken und dann als PDF zu speichern, anstatt sie tatsächlich zu drucken. Dies funktioniert sehr gut für Seiten, die kein anderes Layout zum Drucken einer Seite definieren als zum Anzeigen der Seite.

Leider ist es für mich immer beliebter geworden, ein "Druck" -Stilblatt in eine Website aufzunehmen, das neue Seitenstile definiert, wenn ein Benutzer versucht, die Website zu drucken. Dies ist in der Kopfzeile definiert und sieht ungefähr so ​​aus:

Ich habe nur eine Option gefunden, die wirklich meinen Bedürfnissen entspricht: Das von Chris Pederick entwickelte Add-On / die Erweiterung "Web Developer".

Mit diesem Plugin können Sie ganz einfach ALLE Stile, Standardstile, Inline-Stile, eingebettete Stile und Druckstile deaktivieren!

Es ist derzeit für Firefox und Chrome verfügbar. Ich hoffe wirklich, dass eines Tages eine Safari-Erweiterung auf den Markt kommt, da ich hauptsächlich Safari verwende. 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 geliefert wird. Dies ist während der Entwicklung hilfreich, um zu sehen, wie Ihre Website in einem Nur-Text-Browser angezeigt wird, ohne dass Sie auswählen können, welche Stile deaktiviert werden sollen.

Hier ist ein Beispiel für das Deaktivieren von Druckstilen mit der oben genannten Erweiterung in Firefox:

Quelle Print Sheet - die endgültige Führung

Eine Lösung ohne Plug-in für Firefox: Öffnen Sie die Web Developer Tools und aktivieren Sie in den Standard-Entwicklertools (Zahnradsymbol) das Kontrollkästchen "Screenshot der gesamten Seite erstellen". Sie müssen diesen Teil nur einmal ausführen.

Klicken Sie dann in den Entwicklertools auf das Kamerasymbol. Die gesamte Seite wird als .png gespeichert. Von hier aus können Sie es ausdrucken, in PDF konvertieren usw.

Ich verwende die Chrome-Erweiterung: Screenshot der Webseite . Mit zwei Klicks wird die komplette Webseite in jpg oder pdf konvertiert. Sie müssen die Screenshots nicht mehr selbst zusammenkleben. Diese Seite sieht so aus:

Ich war auch mit dem ähnlichen Problem konfrontiert. Derzeit verwende ich Print Friendly und PDF Extenstion für Chrome .

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

Hier ist noch einer mit dem Namen OpenScreenShoot . Ich liebe es, weil es Open Source ist, erhältlich bei GitHub, und es hat bei mir für eine sehr lange Webseite funktioniert, auf der andere Alternativen wie WebpageScreenShot fehlgeschlagen sind.

(Auf die Gefahr, daraus eine Reihe von Software-Empfehlungen zu machen , scheint die Installation und Verwendung der Browser-Erweiterung X die einzige Antwort zu sein, die tatsächlich funktioniert :)

In letzter Zeit habe ich die Open Screenshot Chrome-Erweiterung für diesen Zweck verwendet und bin sehr zufrieden damit. Es gab keine Probleme mit einer langen Quora-Seite .

Update (November 2017): Dies ist nicht mehr die beste Option: Firefox und Chrome unterstützen jetzt die Erstellung ganzseitiger Screenshots in ihren Entwicklertools .

Heute kann dies in Firefox (ich verwende gerade 65.0.2) wie folgt durchgeführt werden:

1. Drücken Sie F12. Das Developer Tools-Fenster wird angezeigt.
2. In der Nähe der rechten oberen Ecke befindet sich ein Kamerasymbol. Um einen Screenshot der gesamten Seite zu erstellen, klicken Sie darauf.

In den Einstellungen (um darauf zuzugreifen, klicken Sie auf die drei Punkte rechts neben dem Kamerasymbol) 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 zuerst in den Einstellungen aktivieren .