Wie bekomme ich WYSIWYP in einen Webbrowser?

70

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 ?)

reinierpost
quelle
1
mögliches Duplikat von Print From Browser mit Screen CSS?
ƬᴇcƬᴇιʜ007
Die Chrome-Erweiterung "Nimbus Screen Capture App" kann ein Bild der gesamten Webseite aufnehmen, wie sie auf dem Bildschirm angezeigt wird (einschließlich des Teils, den Sie ohne Bildlauf nicht sehen können). Das heißt, es ist, als hätten Sie eine Reihe von Screenshots aufgenommen und zusammengefügt, aber es ist nur ein Knopfdruck.
AE
1
Druckstilvorlagen sind grundsätzlich nützlich. Wenn ich diese Seite zum Beispiel drucke, möchte ich die Frage und die Antworten oder möchte ich auch den Titel, die zugehörige Frage und die Fußzeile? Ich würde mich auch freuen, wenn alle Kommentare sichtbar sind. Websites sind interaktiv, Papierstücke nicht (meistens), und diese Stylesheets können dabei helfen, sich auf den Inhalt zu konzentrieren und Tinte und Papier zu sparen.
SBoss
1
@SBoss: Nicht jeder, der eine Seite druckt, wird an den gleichen Dingen interessiert sein. Ich würde vorschlagen, dass ein Benutzer auf einer druckerfreundlichen Seite auswählen kann, welche Elemente gedruckt werden sollen, und dass die Druckversion mit der Bildschirmversion übereinstimmt, mit Ausnahme der Steuerelemente, die anzeigen, was gedruckt wird aktivieren und deaktivieren Sie sie in Ausdrucken, sie sollten jedoch in der Regel trotzdem auf dem Bildschirm angezeigt werden.
Supercat
1
Zu der Frage, dass es sich um ein Duplikat handelt: Ich habe versucht , das Druck-Stylesheet vor dem Drucken zu entfernen, und es funktioniert nicht. Daher denke ich nicht, dass die Frage ein Duplikat ist.
Reinierpost

Antworten:

37

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 .

Benjamin
quelle
Firefox hat diese Funktion auch im letzten Jahr erhalten. Das ist natürlich überlegen, aber sollte ich aus diesem Grund eine alte Antwort ablehnen?
Reinierpost
@reinierpost liegt es natürlich an dir. Die folgenden Informationen
Benjamin,
Vielen Dank; Diese Antworten besagen, dass ich mich ändern sollte, und ich werde es auch tun, obwohl die zuvor akzeptierte Antwort zu der Zeit, als sie geschrieben wurde, die hilfreichste Antwort gewesen zu sein scheint.
Reinierpost
Wenn ich dies derzeit in Chrome versuche, wird die Option nur im mobilen Ansichtsmodus angezeigt. Ich kann es nicht für die normale Desktop-Ansicht der Seite bekommen.
Reinierpost
Firefox hat diese Fähigkeit auch, aber auf eine andere Art und Weise. Ich nehme an, eine separate Antwort muss dies dokumentieren. Bei anderen Browsern bin ich mir nicht sicher.
Reinierpost
22

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:

Bildbeschreibung hier eingeben

Quelle Print Sheet - die endgültige Führung

DavidPostill
quelle
2
Danke, aber das hilft nicht für die Website, auf der ich es ausprobiert habe (trelloprinter.com). Ich bin erstaunt, wie diese Leute den Mut haben, das zu schreiben, "frustrierend, so viele Websites implementieren sie nicht", wenn sie eine grundlegend gebrochene Herangehensweise an das Problem darstellen, das sie zu lösen versuchen. Wenn Sie separate Stylesheets zum Drucken haben, ist das Design der Benutzeroberfläche fehlgeschlagen, oder Sie haben es gar nicht erst in Anspruch genommen.
Reinierpost
1
Vielleicht wird ScreenshotCaptor das tun, was Sie brauchen, um zu erreichen ... unter anderem wird es scrollende Regionen erfassen ... aber ich erinnere mich, dass es mit Google Maps nicht so gut funktioniert.
DavidPostill
1
Das wird nicht viel helfen. Wenn Sie IE verwenden (ich weiß, speichern Sie Ihre Felsen für später), können Sie Greenshot ( getgreenshot.org ) verwenden, das eine Option bietet, um die IE-Seite zu scrollen und einen Ausdruck davon zu erstellen. Die ganze Seite wird zu einem Screenshot zusammengesetzt. Sie können es dann nach Herzenslust bearbeiten.
Ismael Miguel
18
@reinierpost "Wenn Sie separate Stylesheets für den Druck haben, ist das Design der Benutzeroberfläche 101 fehlerhaft." - Das ist ein unglaublich breiter Pinsel, mit dem Sie dort malen. Wollen Sie mir mitteilen, dass Sie beim Ausdrucken dieser Seite die Hot Network-Fragen oder Informationen zu Chatrooms an der Seite haben möchten? Einige Teile einer Seite sind nur in einem interaktiven Kontext nützlich - warum Speicherplatz und Tintendruck verschwenden?
Chris Hayes
4
@reinierpost Was für eine lächerliche Aussage. Angenommen, eine Site hat einen dunklen Hintergrund mit einem hellen Vordergrund. Ich werde nicht für Sie sprechen, aber ich persönlich bin froh, dass der Browser über eigene Druckstile sowie viele Websites verfügt, sodass ich beim Drucken nicht meine gesamte Tinte verschwenden muss. Es gibt viele Gründe, warum Sie den Inhalt selbst und keinen Screenshot drucken möchten.
Brad
9

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.

Russ
quelle
Wow .. das ist genau das , wonach ich gesucht habe. Danke!
reinierpost
4
Für diese Funktion sind keine Entwicklertools mehr erforderlich! Wählen Sie rechts in der Adressleiste die drei Punkte aus, klicken Sie auf "Screenshot erstellen" und wählen Sie dann "Ganze Seite speichern".
Numbermaniac
Das ist unglaublich, danke!
Kodierungszeremonie
8

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: Webpage Screenshot Demo

Ruut
quelle
1
Dies scheint auch zu funktionieren. Ich hatte gehofft, das PDF würde mir skalierbare Grafiken liefern, aber es ist nur eine Bitmap.
Reinierpost
1
Was für ein großartiger Weg, um Ihre Antwort zu beweisen! :) Ich hätte dies als Antwort akzeptiert ..
Vijay Chavda
Erstaunliche Erweiterung! Es scheint PDF im Querformat zu erstellen. Ist es möglich, PDFs im Hochformat zu erstellen? @reinierpost
user674669
3

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.

Nikhil
quelle
Interessant ... in Firefox verwende ich zu diesem Zweck das Lesezeichen PrintWhatYouLike . Es funktioniert gut, aber es verarbeitet kein "unendliches" Scrollen (eq Quora) - auch diese Erweiterung nicht.
Reinierpost
Netter Tipp - danke! Standardmäßig behält es den Text als Text, Links als Links und zeigt Bilder in voller Größe. Ein 6-seitiger Reiseartikel mit mehreren großen Bildern ist jetzt ein einwandfreies PDF mit 500 KB.
Mike Honey
1

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.

Vijay Chavda
quelle
Ich denke, Sie wollten "1-Klick-Screenshot der Webseite" anstelle von "Screenshot öffnen" sagen. Richtig?
user674669
1

(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 .

reinierpost
quelle
Ich denke, Sie wollten "1-Klick-Screenshot der Webseite" anstelle von "Screenshot öffnen" sagen. Richtig?
user674669
Anscheinend haben sie sich umbenannt. Ich bin mir nicht sicher, was ich mit dieser Antwort anfangen soll.
Reinierpost
1

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 .

Das Screenshot-Tool in den Firefox-Entwicklertools

reinierpost
quelle