IE8 eingebetteter PDF-Iframe

Question 1

Ich habe das Tag verwendet, um eine PDF-Datei einzubetten.

<iframe id="iframepdf" src="https://stackoverflow.com/questions/19654577/files/example.pdf"></iframe>

Dies funktioniert gut in Chrome, IE8+, Firefox usw., aber aus irgendeinem Grund werden die Dateien heruntergeladen, anstatt eingebettet zu werden, wenn einige Leute es in IE8 anzeigen. Ich weiß, dass dieser Browser veraltet ist, aber es ist der Standardbrowser in meinem Büro, und als solcher muss die Website dafür entworfen werden.

Hat jemand eine Idee, warum das passiert, wie ich es beheben kann oder eine Fehlermeldung ausgeben kann, anstatt die Dateien herunterladen zu lassen?

Question 2

Es ist heruntergeladen wahrscheinlich da kein Adobe Reader Plug-In installiert ist. In diesem Fall weiß IE (egal welche Version) nicht, wie es gerendert werden soll, und lädt die Datei einfach herunter (Chrome hat beispielsweise einen eigenen eingebetteten PDF-Renderer).

Wenn Sie wollen versuchen um PDF-Unterstützung zu erkennen könnte:

!!navigator.mimeTypes["application/pdf"]?.enabledPlugin (jetzt veraltet, möglicherweise nur in einigen Browsern unterstützt).
navigator.pdfViewerEnabled (Live-Standard, kann sich ändern und wird derzeit nicht allgemein unterstützt).

2021: Heutzutage ist die ursprüngliche Antwort definitiv veraltet. Wenn Sie nicht relativ alte Browser unterstützen müssen, sollten Sie einfach verwenden <object> (eventuell mit einem Fallback) und es dabei belassen.

Das gesagt. <iframe> ist nicht der beste Weg, um ein PDF anzuzeigen (vergessen Sie nicht die Kompatibilität mit mobilen Browsern, z. B. Safari). Einige Browser öffnen diese Datei immer in einer externen Anwendung (oder in einem anderen Browserfenster). Der beste und kompatibelste Weg, den ich gefunden habe, ist ein bisschen knifflig, funktioniert aber auf allen Browsern, die ich ausprobiert habe (sogar ziemlich veraltet):

Behalten Sie Ihre <iframe> aber kein PDF darin anzeigen, wird es mit einer HTML-Seite gefüllt, die aus einem besteht <object> Schild. Erstellen Sie eine HTML-Umbruchseite für Ihr PDF, so sollte es aussehen wie Das:

<html>
<body>
    <object data="your_url_to_pdf" type="application/pdf">
        <div>No online PDF viewer installed</div>
    </object>
</body>
</html>

Natürlich müssen Sie noch das entsprechende Plug-in im Browser installieren. Sehen Sie sich auch diesen Beitrag an, wenn Sie Safari auf Mobilgeräten unterstützen müssen.

Warum eine HTML-Seite? So können Sie einen Fallback bereitstellen, wenn der PDF-Viewer nicht unterstützt wird. Interner Viewer, einfache HTML-Fehlermeldungen/-Optionen und so weiter…

Es ist schwierig, die PDF-Unterstützung zu überprüfen, damit Sie Ihren Kunden einen alternativen Viewer zur Verfügung stellen können PDF.JS Projekt; es ist ziemlich gut, aber die Wiedergabequalität – für Desktop-Browser – ist nicht so gut wie eine einheimisch PDF-Renderer (Ich habe aufgrund der Bildschirmgröße keinen Unterschied in mobilen Browsern festgestellt, nehme ich an).

Question 3

Wenn der Browser ein PDF-Plugin installiert hat, führt er das Objekt aus, wenn nicht, verwendet er den PDF-Viewer von Google, um es als einfaches HTML anzuzeigen:

<object data="https://stackoverflow.com/questions/19654577/your_url_to_pdf" type="application/pdf">
    <iframe src="https://docs.google.com/viewer?url=your_url_to_pdf&embedded=true"></iframe>
</object>

Question 4

Iframe

<iframe id="fred" style="border:1px solid #666CCC" title="PDF in an i-Frame" src="https://stackoverflow.com/questions/19654577/PDFData.pdf" frameborder="1" scrolling="auto" height="1100" width="850" ></iframe>

Objekt

<object data="https://stackoverflow.com/questions/19654577/your_url_to_pdf" type="application/pdf">
  <embed src="https://stackoverflow.com/questions/19654577/your_url_to_pdf" type="application/pdf" />
</object>

Question 5

Probieren Sie es aus.

<iframe src="https://docs.google.com/viewerng/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" frameborder="0" height="100%" width="100%">
</iframe>

Question 6

In meinem Fall habe ich den Link direkt gesetzt und es funktioniert gut.

<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
</head>
<body>
    <h1>Online HTML Editor</h1>
    <div>This is real time online HTML Editor</div>
    <iframe id="if1" width="100%" height="900" style="visibility:visible" src="https://www.africau.edu/images/default/sample.pdf"></iframe>
</body>
</html>

Notiz: Der obige Code, der in einer HTML-Datei funktioniert, die auf diesem Stack nicht funktioniert, wird in diesem Snippest überschrieben

Question 7

Verwenden Sie die Adobe Embed PDF-API. Dies ist die Lösung, die ich am Ende verwendet habe. Funktioniert perfekt.