2014-11-28 12:39:53 +0000 2014-11-28 12:39:53 +0000
73
73

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

Wenn ich eine Webseite von meinem Browser aus drucke, erwarte ich, dass ich genau den Inhalt, den ich im Browser sehe, auf dem Papier bekomme. Um genau zu sein: Ich erwarte, dass der Browser denselben Seiteninhalt auf dieselbe Weise rendert, nur auf einer Leinwand mit unendlicher Höhe, und dann auf druckspezifische Weise entscheidet, wie das Ergebnis auf physische Papierseiten verteilt wird.

Das ist aber überhaupt nicht das, was auf vielen Webseiten passiert. Sie drucken möglicherweise etwas völlig anderes. Ich habe nie darum gebeten, dass die Browser das tun, und ich möchte auch nicht, dass das passiert.

Gibt es eine Möglichkeit, das zu bekommen, was ich will (außer Screenshots zu machen, sie mühsam auszuschneiden und einzufügen und die resultierenden Bilder zu drucken)? Gibt es eine Möglichkeit, einem von mir verwendeten Webbrowser (Firefox, Chrome, Safari, IE oder Opera) mitzuteilen: “Drucke diese Seite so, wie du sie in einem beliebig großen Browserfenster darstellen würdest”?

(PS: siehe auch: Print From Browser Using Screen CSS ?)

Antworten (8)

42
42
42
2017-11-26 06:13:40 +0000

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.

23
23
23
2014-11-28 12:59:05 +0000

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

9
9
9
2017-05-09 13:01:26 +0000

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.

8
8
8
2014-12-02 07:29:40 +0000

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:

3
3
3
2016-10-12 11:47:35 +0000

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.

1
1
1
2016-10-27 18:42:56 +0000

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

1
1
1
2019-03-14 12:26:08 +0000

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.

1
1
1
2017-06-22 16:06:45 +0000

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.