Wer PDF-Dokumente auf einer Website anbietet, hat nur begrenzten Einfluss darauf, wie diese beim Besucher angezeigt werden. Browser wie Edge, Google Chrome oder Firefox behandeln PDF-Dateien abhängig von ihren Einstellungen unterschiedlich. Dadurch kann dieselbe PDF-Datei bei verschiedenen Besuchern völlig unterschiedlich dargestellt werden.
Manche Besucher sehen lediglich die PDF-Seite, andere werden aufgefordert, die Datei herunterzuladen, zu speichern und anschließend zu öffnen. Bei Verwendung eines PDF-Viewers wie Adobe Acrobat Reader bzw. Acrobat Professional erhält man zusätzlich Seitenminiaturen und weitere Funktionen. Außerdem werden PDFs meist erst nach einem Klick auf einen Link angezeigt.
Da mir weder die Browser-Einstellungen noch die installierte Software der Besucher bekannt sind, suchte ich nach einer browserunabhängigen Lösung. Die Antwort lautet: PDF.js.
PDF.js ist ein plattformunabhängiger Open-Source-PDF-Viewer. Er ermöglicht die browserunabhängige Darstellung von PDF-Dateien mit Seitenminiaturen, Suchfunktion und Navigation, ohne dass der Besucher zusätzliche Software installieren muss. Die Software kann man von https://mozilla.github.io/pdf.js/ runterladen. Danach werden die gesamte Dateien und Verzeichnisse mit einem FTP Programm (FileZilla) in der Root des Webs wo der Viewer eingesetzt werden soll kopiert. Nachher soll der Verzeichnisbaum folgendermaßen aussehen.
Da die Einbindung in WordPress am einfachsten ist, beginne ich mit diesem Beispiel.
Erstellen Sie zunächst einen neuen Beitrag. Im Gutenberg-Editor wählen Sie den Block „Individuelles HTML“ aus. Anschließend erscheint ein Eingabefeld, in das der HTML-Code eingefügt werden kann.
Für einen ersten Funktionstest empfiehlt es sich, die mit PDF.js mitgelieferte Testdatei zu verwenden. Fügen Sie dazu folgenden Code ein:
Danach sollte die PDF-Datei bereits im visuellen Editor von Gutenberg dargestellt werden. So hat es zumindest bei mir funktioniert. Zusätzlich kann die Funktion von PDF.js direkt im Browser mit der mitgelieferten Testdatei überprüft werden. Hierzu wird folgende URL aufgerufen:
https://deine_domaine/pdfjs/web/viewer.html?file=/pdfjs/web/compressed.tracemonkey-pldi-09.pdf
Anschließend kann die mitgelieferte Testdatei durch die eigene PDF-Datei ersetzt werden. Beim Aufruf des Beitrags wird die PDF-Datei dann direkt im PDF.js-Viewer angezeigt, ohne dass der Besucher zusätzliche Software installieren oder besondere Browser-Einstellungen vornehmen muss.
Comments are closed, but trackbacks and pingbacks are open.