PDF anzeigen funktioniert nicht auf iPhone

[Dietrich Juhl]

Ich möchte ein PDF in einer HTML-Datei anzeigen. Das funktioniert mit object, embed und iframe auf Macbook und iPad. Auf meinem iPhone wird das PDF nur im iframe angezeigt. Ich habe gelesen dass Safari auf iphone keine PDFs anzeigen kann, dem widerspricht aber, dass es mit iframe funktioniert. Gibt es eine einfache Lösung? Vielen Dank

[Gunnar Bittersmann]

@@Dietrich Juhl

Auf meinem iPhone wird das PDF nur im iframe angezeigt. Ich habe gelesen dass Safari auf iphone keine PDFs anzeigen kann, dem widerspricht aber, dass es mit iframe funktioniert. Gibt es eine einfache Lösung?

Für welches Problem?

Kwakoni Yiquan

[Raketenwilli]

@@Dietrich Juhl

Gunnar meint mit „Für welches Problem?“, dass es in Frage steht, bei kleineren Bildschirmen (vor allem Smartphones) das PDF besser zum Download und also zum Öffnen in einer dafür gedachten App oder direkt im Browser (als eigene Seite) anzubieten.

Ein PDF (als Objekt oder „embedded“) oder so - also mit einer Webseite drum herum - ist auf kleinen Bildschirmen „sportlich“ - ich glaub die Empfänger sind wegen der resultierenden optischen Anstrengung etwas vernervt.

Wenn Du DAS vermeidest (CSS kann sowas) ist mitautomatisch auch Dein iPhone-Problem „erschlagen“.

[Gunnar Bittersmann]

@@Raketenwilli

Gunnar meint mit „Für welches Problem?“, dass es in Frage steht, bei kleineren Bildschirmen (vor allem Smartphones) das PDF besser zum Download und also zum Öffnen in einer dafür gedachten App oder direkt im Browser (als eigene Seite) anzubieten.

Hm, eigentlich meinte ich mit „Für welches Problem?“, dass Dietrich sagt, dass es mit iframe auf iPhone funktioniert, und ich mir nicht vorstellen kann, dass er will, dass das behoben werden soll.

Kwakoni Yiquan

[Dietrich Juhl]

Mein Problem: Ich möchte ein PDF mit nur einer Seite, wie ein Bild anzeigen. Warum: Ich baue eine Seite, auf der man Bilder durchblättern kann. Dabei können die Bilder png, jpg, svg und pdf sein. Den Sinn brauchen wir nicht zu diskutieren. Das funktioniert auch mit object oder embed und wird wie gewünscht richtig angezeigt. Nur auf dem iPhone wird das pdf nicht angezeigt. Meine Frage ist nun, muss ich anders coden?

Das pdf grundsätzlich auf iPhone angezeigt werden kann, sehe ich an der Einbettung mit iframe. Die taugt für meinen Zweck aber nicht. Ein Blick ins Beispiel zeigt meine Problematik : juhl.de/buch/bb8

[Robert B.]

Moin Dietrich,

Ich möchte ein PDF mit nur einer Seite, wie ein Bild anzeigen.

Und wenn das PDF-Dokument mehrere Seiten hat?

Ich baue eine Seite, auf der man Bilder durchblättern kann. Dabei können die Bilder png, jpg, svg und pdf sein. Den Sinn brauchen wir nicht zu diskutieren. Das funktioniert auch mit object oder embed und wird wie gewünscht richtig angezeigt. Nur auf dem iPhone wird das pdf nicht angezeigt. Meine Frage ist nun, muss ich anders coden?

Du kannst doch einfach alle Grafiken als iframe einbinden, oder irre ich mich?

Viele Grüße
Robert

[Rolf B]

Hallo Robert,

Ich möchte ein PDF mit nur einer Seite, wie ein Bild anzeigen.

Und wenn das PDF-Dokument mehrere Seiten hat?

Er schrub doch: ein PDF mit nur einer Seite. Das überflüssige Komma denk Dir weg.

Ich entnehme daraus: Dietrich kann die Art der anzuzeigenden Dokumente festlegen.

Wie man das auf iPhones löst, weiß ich nicht. Ich mutmaße aber: wenn es nur mit iframes geht, dann muss für ein PDF halt ein iframe her und für die übrigen Elemente nicht. Woher rührt die Annahme, es einheitlich machen zu müssen?

Aber der Selfvirus rührt sich, ich weiß was anderes: das Layout der Slides ist fritte. Beispiel: slick-index 3 (sniplogo.pdf als Object) wird bei mir nur mit 150px Höhe angezeigt, weil das der Defaultwert ist. Die Höhenangabe von 100% für .slick-slide greift nicht, weil es kein Elternelement mit einer intrinsischen Höhe gibt, auf die sich die 100% beziehen könnten Ein aspect-ratio "auto" greift offenbar auch nicht - ich vermute, dass das PDF keine intrinsischen Abmessungen hat.

D.h. hier muss weiter oben im DOM etwas mit height passieren, bspw. auf dem slick-track. Man könnte dort height:max(50em, 90vh) setzen. Man könnte auch den body der Seite per Grid-Layout aufbauen und dem body ein height:100vh geben. Den Rest kann man dann mit entsprechenden height-Angaben darauf beziehen. Das Slide, worin das PDF ist, könnte dann wiederum als Grid oder Flexbox gestaltet werden, um das PDF und das p darunter sauber zu verteilen. Apropos sauber: sowas möchte eigentlich eine figure mit figcaption sein, kein div mit einem p als Untertitel.

Rolf

[Raketenwilli]

Dabei können die Bilder png, jpg, svg und pdf sein

ein PDF mit nur einer Seite, wie ein Bild anzeigen

In dem Fall ist die „einfache“ Lösung:

pdftoppm -png datei.pdf datei.png

Bei meinem Hoster ist das Programm pdftoppm auf dem Server. Falls das bei Dir nicht so ist:

• Alternative in PHP
• Alternative in Python

[Raketenwilli]

Hier das optimierte Beispiel für eine PDF-Datei, welche nur schwarzen Text enthält:

pdftoppm -png -singlefile -mono datei.pdf datei

Zum Manual von pdftoppm.

Das Zeug gibt es auch für Windows. Auf dem Mac versuche brew install poppler.

Das Vorgehen in PHP:

<?php
# Dateiname ohne Endung:
$filename="Datei";

# Objekt bauen
$imagick = new Imagick();

# Nur erste Seite des PDF lesen
$imagick->readImage( $filename . '.pdf[0]' ); 

# Verhindert schwarzen Hintergrund für durchsichtige Bereiche
$imagick = $imagick->flattenImages(); 

$imagick->writeFile('$filename.jpg');

# ggf.  Speicher sparen
unset( $imagick );

Da ergibt sich noch „drumherum“. Aber das hängt von der Frage ab, wie das PDF auf den Server kommt.

[Robert B.]

Moin,

Dabei können die Bilder png, jpg, svg und pdf sein

ein PDF mit nur einer Seite, wie ein Bild anzeigen

In dem Fall ist die „einfache“ Lösung:

pdftoppm -png datei.pdf datei.png

Wenn das PDF-Dokument ausschließlich als Bild interpretiert werden soll, hast Du recht. Wenn neben den Vektoren auch der Inhalt wichtig ist, wäre ansonsten auch ein SVG-Export denkbar, z.B. mit Inkscape auf der Kommandozeile:

inkscape -o datei.svg datei.pdf

Unter Linux (oder unter Windows mit TeXlive) kann auch das Tool pdftocairo verwendet werden:

pdftocairo -svg datei.pdf datei.svg

Viele Grüße
Robert

[Raketenwilli]

Unter Linux (oder unter Windows mit TeXlive) kann auch das Tool pdftocairo verwendet werden:

pdftocairo -svg datei.pdf datei.svg

Hm. Hat im Test (wie erwartet) eine unschön große Datei erzeugt. Das würde ich wohl gleich packen …

pdftocairo -noshrink -f 1 -svg -- DATEI.pdf  - | gzip -c > DATEI.svg.gz

… und/oder meinen Server so konfigurieren, dass er beim Abruf einer SVG-Datei und Vorhandensein der gezippten Version eben diese (mit passendem Transport-Header) ausliefert,

[Dietrich Juhl]

Vielen Dank für eure wirklich guten Workarounds! Allerdings habe ich meine Gründe die Bilder als PDF einbinden zu wollen (zoombar, Texte auslesbar und für mein Vorhaben mit 1.000 Bildern der bessere Workflow). Ich arbeite auch mit svgs und pngs, das funktioniert gibt aber andere Probleme. Ich wundere mich und verstehe nach wie vor nicht, warum das pdf mit object und embed auf allen Devices funktioniert, nur auf dem iPhone nicht. Das hätte ich als Purist gerne gelöst. Vielen Dank nochmal

[ThomasM]

Hallo Dietrich,

Ich wundere mich und verstehe nach wie vor nicht, warum das pdf mit object und embed auf allen Devices funktioniert, nur auf dem iPhone nicht. Das hätte ich als Purist gerne gelöst.

Eine Lösung (außer iframe zu verwenden) habe ich auch nicht, kann aber eine Beobachtung mit zwei iPhones und unterschiedlichen iOS-Versionen (jeweils die letzte verfügbare) teilen. Auf dem Oldie funktioniert die Anzeige noch, siehe Bild.

Grüße,
Thomas

[Rolf B]

Hallo Dietrich,

ich habe nochmal ein bisschen recherchiert und mich mit einem künstlichen Idioten über das Thema unterhalten. Der meinte nach einigem Bohren, man müsse ein PDF Plugin installiert haben, damit iOS Safari ein PDF per object Element anzeigen könne.

Ob das stimmt oder eine GPT Halluzination ist, weiß ich nicht.

Wie man an ein solches Plugin rankommt oder ob es sowas heutzutage nicht mehr gibt, weiß ich auch nicht.

Aber vielleicht ist das ein Ansatz für Dich.

(Vorher waren 2 andere fruchtlose Fragen, bei denen es schon um iOS und Safari ging, er hätte das als Kontext mitnehmen müssen - hat er aber nicht wirklich 😉)

Rolf: ich möchte eine pdf datei mit dem object element einbetten. geht das?

GPT: Ja, es ist möglich, eine PDF-Datei mit dem <object>-Element in eine Webseite einzubetten. Das <object>-Element wird verwendet, um eine externe Ressource wie ein PDF-Dokument in eine HTML-Seite einzubetten. Hier ist ein Beispielcode:

<object data="example.pdf" type="application/pdf" width="100%" height="600px">
  <p>Alternative Text, falls das PDF nicht angezeigt werden kann</p>
</object>

In diesem Beispiel wird die PDF-Datei "example.pdf" in das <object>-Element eingebettet. Das Attribut "type" gibt den MIME-Typ des Dokuments an, in diesem Fall "application/pdf". Die Attribute "width" und "height" legen die Größe des Elements fest. Wenn das PDF-Dokument nicht angezeigt werden kann, wird der alternative Text innerhalb des <object>-Elements angezeigt.

Rolf: Sind hierbei schwierigkeiten im safari browser bekannt

GPT: Es gibt keine bekannten Probleme mit der Verwendung des <object>-Elements, um PDF-Dateien in Safari einzubetten. Safari unterstützt das <object>-Element und kann PDF-Dateien ohne Probleme anzeigen, solange das PDF-Plugin installiert ist und die PDF-Datei nicht beschädigt oder korrupt ist.

Allerdings gibt es einige Dinge zu beachten, wenn Sie PDF-Dateien in Safari einbetten:

• Safari blockiert standardmäßig automatisch das automatische Abspielen von Multimedia-Inhalten wie Videos und Audiodateien. Wenn Sie also ein PDF-Dokument einbetten, das Multimedia-Inhalte enthält, müssen Sie sicherstellen, dass der Benutzer auf die Schaltfläche "Play" klicken kann, um das Abspielen zu starten.

• Wenn Sie das <object>-Element verwenden, um ein PDF-Dokument einzubetten, wird der Benutzer möglicherweise aufgefordert, das PDF-Plugin herunterzuladen und zu installieren, wenn es nicht bereits installiert ist. In diesem Fall muss der Benutzer das Plugin herunterladen und installieren, bevor er das PDF-Dokument anzeigen kann.

• Es kann vorkommen, dass Safari die PDF-Datei nicht richtig anzeigt, wenn sie beschädigt oder korrupt ist. In diesem Fall sollten Sie sicherstellen, dass die PDF-Datei ordnungsgemäß erstellt und gespeichert wurde.

Weil ich beim Bingsen einige Hinweise auf Plugins und Flash fand, und Thomas auch meinte, dass es mit einem alten iPhone gänge, habe ich noch dies gefragt:

Rolf: Benötigt das PDF Plugin für Safari unter iOS den Flashplayer

GPT: Nein, das PDF-Plugin für Safari unter iOS benötigt keinen Flashplayer. In der Tat unterstützt Safari auf iOS-Geräten Flash-Inhalte nicht, da Apple sich entschieden hat, Flash aufgrund von Sicherheitsbedenken nicht auf seinen Geräten zu unterstützen.

Das PDF-Plugin für Safari auf iOS-Geräten ist ein eigenständiges Plugin, das PDF-Dateien ohne Flashplayer anzeigen kann. Das Plugin wird automatisch installiert, wenn der Benutzer zum ersten Mal auf eine PDF-Datei in Safari stößt. Wenn das Plugin nicht installiert ist, wird der Benutzer aufgefordert, es herunterzuladen und zu installieren, bevor er das PDF-Dokument anzeigen kann.

Rolf: Wo finde ich dieses Plugin?

GPT: Das PDF-Plugin für Safari auf iOS-Geräten wird automatisch installiert, wenn der Benutzer zum ersten Mal auf eine PDF-Datei in Safari stößt. Wenn das Plugin nicht installiert ist, wird der Benutzer aufgefordert, es herunterzuladen und zu installieren, bevor er das PDF-Dokument anzeigen kann.

Hast Du ggf. einmal eine solche Rückfrage mit „Nein, will ich nicht“ beantwortet?

Rolf: Wie zeige ich in iOS Safari die installierten Plugins an

GPT: Öffnen Sie die Einstellungen-App auf Ihrem iOS-Gerät.
Scrollen Sie nach unten und wählen Sie "Safari".
Wählen Sie "Erweitert".
Wählen Sie "Website-Daten".
Hier sehen Sie eine Liste der installierten Plugins und der von ihnen gespeicherten Daten.

Beachten Sie jedoch, dass Safari auf iOS-Geräten standardmäßig keine Plugins unterstützt, außer dem PDF-Plugin, das automatisch installiert wird, wenn der Benutzer zum ersten Mal auf eine PDF-Datei in Safari stößt.

HHD
Rolf

[Dietrich Juhl]

@Thomas: vielen Dank, das ist interessant @Rolf: auch dir vielen Dank für deine Recherche. Ich bin auch zuerst auf die PlugIn-Erklärung reingefallen, denn mittlerweile glaube ich dass gar kein PlugIn mehr erforderlich ist und es ist ja so, dass andere PDFs auch in Safari problemlos angezeigt werden. z.B. wenn man auf einen Link zum PDF klickt. Vielleicht ist es doch nur ein Bug. Die Idee einer beschädigten PDF habe ich auch schon ausgeschlossen. Nochmals vielen Dank an alle!

[Rolf B]

Hallo Dietrich,

wenn man auf einen Link zum PDF klickt

wird das PDF als eigene Seite geöffnet. Deshalb funktioniert der iframe, auch das ist eine Art "eigene Seite".

Einbettung mit <object> oder <embed> ist was anderes.

Rolf

[Auge]

Hallo

Rolf: Wie zeige ich in iOS Safari die installierten Plugins an

GPT: Öffnen Sie die Einstellungen-App auf Ihrem iOS-Gerät.
Scrollen Sie nach unten und wählen Sie "Safari".
Wählen Sie "Erweitert".
Wählen Sie "Website-Daten".
Hier sehen Sie eine Liste der installierten Plugins und der von ihnen gespeicherten Daten.

Ich bin dieser Anleitung gefolgt und habe unter diesem Menüpunkt die von Websites gespeicherten Daten gefunden. Das ist auch genau das, was ich unter „Website-Daten“ erwarte. Plugins werden bei mir dort jedenfalls nicht aufgelistet. Die würde ich auch eher unter „Erweiterungen“^[1] erwarten. Bei mir ist da außer AdGuard nichts zu finden. Ich bin mir allerdings auch nicht bewusst, auf diesem iPhone jemals eine PDF-Datei in einer Website geöffnet zu haben.

Tschö, Auge

---

1. Der Menüpunkt ist auf der Hauptseite der Einstellungen für Safari und nicht unter dem Unterpunkt „Erweitert“ zu finden. ↩︎