Wie bekomme ich WYSIWYP (print what you see) in einem Webbrowser?

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

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

Was ist ein Print-Stylesheet?

Ein Print-Stylesheet formatiert eine Webseite, sodass beim Drucken druckt automatisch in einem benutzerfreundlichen format. Print-stylesheets haben schon seit einigen Jahren und wurden über eine Menge geschrieben. Doch so wenige Websites implementieren sie, Bedeutung wir sind mit Web-Seiten links dass frustrierend nicht richtig auf Papier drucken.

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

• Print-Stylesheets 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 druckfreundlichen Version der Seite, aber das muss natürlich eingerichtet werden und pflegen. Es erfordert auch dass Benutzer diesen Link auf dem Bildschirm bemerken und ihn dann im Voraus verwenden die normale Art, wie sie Seiten drucken (z. B. durch Auswahl der Schaltfläche Drucken oben auf dem Bildschirm). Druckfreundliche Versionen sind jedoch nützlich beim gleichzeitigen Drucken einer Anzahl von Webseiten, wie z. B. artikel, der sich auf mehrere Webseiten erstreckt.

Quelle Deaktivieren Sie Print-Stylesheets (CSS) Beim Drucken von einer Website

Wie deaktiviere ich einen Druck Stylesheet?

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

Eine Option besteht darin, sequentielle Screenshots zu machen, während Sie nach unten scrollen seite, dann Stück sie wieder zusammen in Photoshop. Dies ist Zeit verbrauchen 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 tatsächlich zu drucken. Dies funktioniert sehr gut für Seiten, die dies tun definieren Sie kein anderes Layout zum Drucken einer Seite als zum Anzeigen der Seite.

Leider ist es für mich immer beliebter geworden, ein Stylesheet "drucken" auf einer Website, das neue Seitenstile definiert, wenn ein der 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 auf meine Bedürfnisse eingeht: Das " Web Entwickler " Add-on / Erweiterung entwickelt von Chris Pederick.

Mit diesem Plugin können Sie sehr einfach ALLE Stile deaktivieren, Standard stile, Inline-Stile, eingebettete Stile und, wie Sie es erraten haben, drucken stile!

Es ist derzeit für Firefox und Chrome verfügbar. Ich hoffe wirklich ein Safari-Erweiterung wird eines Tages kommen, da ich in erster Linie Safari verwenden. Der einzige Option, die ich für Safari gefunden habe, ist das Deaktivieren ALLER Stile-a Funktion, die standardmäßig mit der neueste version (5.0.3) der Browser. Dies ist während der Entwicklung nützlich, um zu sehen, wie Ihre Website funktioniert in einem Nur-Text-Browser angezeigt werden, aber ohne die Möglichkeit zur Auswahl welche Stile Sie deaktivieren, hat einen begrenzten Nutzen.

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

Quelle Stylesheet drucken-der definitive Leitfaden

Ein no plug-in-Lösung für Firefox: Öffnen Sie Web Entwickler Tools in der Standard-Entwickler-Tools (ZAHNRAD-Symbol) aktivieren Sie "Nehmen Sie einen screenshot der gesamten Seite."Sie müssen diesen Teil nur einmal machen.

Klicken Sie dann in Entwicklertools auf das Kamerasymbol. Die gesamte Seite wird als gespeichert werden .png. Von hier aus können Sie es drucken,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 stand auch vor dem ähnlichen Problem. Derzeit benutze ich Drucken freundlich und PDF Extenstion für Chrome.

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

Hier ist ein anderer namens OpenScreenShoot. Ich liebe es, weil es Open Source ist, verfügbar bei GitHub, und es funktionierte für mich für eine sehr lange Webseite, auf der andere Alternativen wie WebpageScreenShot fehlgeschlagen sind.

(Auf die Gefahr hin, dies in eine Reihe von Softwareempfehlungen umzuwandeln Antworten, aber bisher scheint die Browsererweiterung X zu installieren und zu verwenden die einzige Art von Antwort, die tatsächlich funktioniert:)

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

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

Heute kann dies in Firefox (ich verwende gerade 65.0.2) wie folgt erfolgen:

1. Drücken Sie F12. Der Bereich Entwicklertools wird angezeigt.
2. In der rechten oberen Ecke befindet sich ein Kamerasymbol. Um einen Screenshot der gesamten Seite zu machen, klicken Sie darauf.

In 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 Ihren Firefox-Downloads gespeichert Ordner.

Wenn das Kamerasymbol fehlt, müssen Sie es zuerst in den Einstellungen aktivieren.