Kategorie: browser

Screenshots von Webseiten als Bild oder PDF abspeichern

Mit der Veröffentlichung von Chrome-/Chromium-Headless ist es recht einfach, Screenshots zu erstellen.

Früher musste man zb auf PhantomJS zurückgreifen, doch PhantomJS war nicht ganz so zuverlässig.

Wie also Screenshots erstellen?

Screenshots mit Puppeteer (node.js) und Headless-Chrome

Puppeteer kommt vom Chrome-Team und ist eine Node.js Bibliothek.

Puppeteer bietet eine API um einfach mit Chrome-Headless zu sprechen.

Was kann Puppeteer?

  • PDFs und Bilder von Webseiten screenshotten
  • Webscraping, Contentscraping
  • Formulare abschicken
  • Tastatureingaben
  • UI-Testing

Beispiele für die Verwendung findet man auf der GitHub Seite.

Folgendes Tutorial bietet auch einen Startpunkt:

https://tutorialzine.com/2017/08/automating-google-chrome-with-node-js

Screenshots mit Chrome-Headless und Linux-Terminal

Mit einem Terminal lassen sich leicht Screenshots als PDF oder Bild speichern:

chrome --headless --disable-gpu --screenshot https://www.kaoh.at

# Screenshot in Nexus 5x Auflösung
chrome --headless --disable-gpu --screenshot --window-size=412,732 https://www.kaoh.at

Ein guter Artikel und Anleitung dazu findet sich hier:

Echter Headless Chrome (oder Chromium) – Bedien deinen Browser per Kommandozeile, Selenium oder node.js!

Was ist Chrome-Headless?

  • Mit Chrome-Headless kann man den Browser per Kommandozeile/Terminal, Selenium, node.js oder C++ verwenden.
  • Chrome kann daher ressourcenschonend ohne grafische Ausgabe am Server laufen.
  • Man kann per Code Screenshots oder PDFs erstellen, Webseiten debuggen, Formulare ausfüllen und versenden und eben alles machen, was man auch mit der Maus, Tastatur oder per Touch machen kann!

 Gibt es auch Chromium Headless?

Natürlich lässt sich Chromium auch headless starten, und das geht zb im Linux-Terminal so:

$ chromium-browser --headless

Verwendung

Speichern als PDF

$ chromium-browser --headless --disable-gpu --print-to-pdf https://www.kaoh.at

Dieser Befehl erzeugt ein PDF von der angegebenen Seite. Das Ergebnis schaut dann zb so aus:


Es wird also ein PDF mit mehreren Seiten generiert.

Screenshots

chrome --headless --disable-gpu --screenshot https://www.kaoh.at

# Screenshot in Nexus 5x Auflösung
chrome --headless --disable-gpu --screenshot --window-size=412,732 https://www.kaoh.at

Der normale Screenshot liefert folgendes Bild:

Der Screenshot mit der Nexus 5x Auflösung schaut so aus:

Hilfestellungen

Brauche ich die –disable-gpu Flag?

Ja, weil dadurch ein paar Bugs umgangen werden

Wo liegt der Unterschied zu PhantomJS?

PhantomJS verwendet eine ältere Renderengine (eine ältere WebKit-Version).

Viel wichtiger: PhantomJS ist unzuverlässiger, liefert nicht so gute und nachvollziehbare Ergebnisse und macht Probleme mit manchen JavaScript-Dingen.

 

Interessante Links

Mit JavaScript einfach auf ältere Browser testen

Um zu erkennen, wie alt der Browser ist und was er kann, gibt es mehrere Möglichkeiten. Das ganze nennt sich auch Feature Detection.

Ein Ansatz kommt von der BBC:

 

Ein viel einfacherer Ansatz ist:

if (!('visibilityState' in document)) return;

Die Idee stammt von Jake Archibald: