HTML ingebed PDF-iframe

Ik heb de tag gebruikt om een pdf-bestand in te sluiten.

<iframe id="iframepdf" src="files/example.pdf"></iframe>

Dit werkt prima in Chrome, IE8+, Firefox enz., maar om de een of andere reden, wanneer sommige mensen het in IE8 bekijken, worden de bestanden gedownload in plaats van ingesloten. Ik weet dat deze browser verouderd is, maar het is de standaard browser op mijn kantoor en daarom moet de website hiervoor ontworpen zijn.

Heeft iemand enig idee waarom dit gebeurt, hoe ik het kan oplossen of anders een foutmelding kan geven in plaats van de bestanden te laten downloaden?


Antwoord 1, autoriteit 100%

Het is waarschijnlijkgedownload omdat er geen Adobe Reader-plug-in is geïnstalleerd. In dit geval weet IE (het maakt niet uit welke versie) niet hoe het moet worden weergegeven en downloadt het gewoon het bestand (Chrome heeft bijvoorbeeld zijn eigen ingebedde PDF-renderer).

Dat gezegd hebbende. <iframe>is niet de beste manier om een PDF weer te geven (vergeet niet de compatibiliteit met mobiele browsers, bijvoorbeeld Safari). Sommige browsers openen dat bestand altijd in een externe toepassing (of in een ander browservenster). De beste en meest compatibele manier die ik heb gevonden, is een beetje lastig, maar werkt in alle browsers die ik heb geprobeerd (zelfs behoorlijk verouderd):

Bewaar uw <iframe>maar toon er geen PDF in, deze wordt gevuld met een HTML-pagina die bestaat uit een <object>-tag . Maak een HTML-teruglooppagina voor uw PDF, deze moet er alszo uitzien:

<html>
<body>
    <object data="your_url_to_pdf" type="application/pdf">
        <embed src="your_url_to_pdf" type="application/pdf" />
    </object>
</body>
</html>

Natuurlijk moet u nog steeds de juiste plug-in in de browser installeren. Bekijk ook dit berichtals je Safari op mobiele apparaten moet ondersteunen.

1e. Waarom <embed>nesten in <object>? Je vindt het antwoord hier op SO. In plaats van een geneste tag <embed>, kunt u (moet!) een aangepast bericht voor uw gebruikers (of een ingebouwde viewer, zie de volgende paragraaf) opgeven. Tegenwoordigkan <object>zonder zorgen worden gebruikt, en <embed>is nutteloos.

2e. Waarom een HTML-pagina? U kunt dus een fallback bieden als de PDF-viewer niet wordt ondersteund. Interne viewer, gewone HTML-foutmeldingen/opties, enzovoort…

Het is lastig om PDF-ondersteuning te controleren, zodat u uw klanten een alternatieve viewer kunt bieden, kijk eens op PDF.JS-project; het is redelijk goed, maar de weergavekwaliteit – voor desktopbrowsers – is niet zo goed als een nativePDF-renderer (ik zag geen verschil in mobiele browsers vanwege de schermgrootte, denk ik).


Antwoord 2, autoriteit 43%

Als de browser een pdf-plug-in heeft geïnstalleerd, voert deze het object uit, zo niet gebruikt hij Google’s PDF Viewer om het als gewone HTML weer te geven:

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

Antwoord 3, autoriteit 16%

Iframe

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

object

<object data="your_url_to_pdf" type="application/pdf">
  <embed src="your_url_to_pdf" type="application/pdf" />
</object>

Antwoord 4, Autoriteit 16%

Probeer dit.

<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>

Antwoord 5

na veel tijd besteden heb ik eindelijk een oplossing gevonden !!!

Beste optie is om gratis service te gebruiken door Adobe, PDF Embed API.
https://www.adobe.io/apis/documentcloud/dcsdk/

  1. Maak je project
  2. Krijg uw client-ID
  3. Voeg uw domein toe (het werkt alleen voor dat domein)

Antwoord 6

Gebruik Adobe Embed PDF API. Dit is de oplossing die ik uiteindelijk gebruikte, werkt perfect.

Other episodes