HTML intégré PDF iframe

j'ai utilisé l'étiquette pour intégrer un fichier pdf. 

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

cela fonctionne très bien dans Chrome, IE8+, Firefox etc, mais pour une certaine raison, quand certaines personnes le regardent dans IE8, les fichiers téléchargent au lieu de l'intégration. Je sais que ce navigateur est désuet, mais c'est le navigateur standard dans mon bureau et en tant que tel, le site Web doit être conçu pour cela.

est-ce que quelqu'un a une idée sur la raison de ce qui se passe, comment je peux le réparer ou autrement mettre un message d'erreur au lieu de laisser les fichiers télécharger?

31
demandé sur Luke Girvin 0000-00-00 00:00:00

3 réponses

c'est téléchargé probablement parce qu'il n'y a pas de plug-in Adobe Reader installé. Dans ce cas, IE (peu importe la version) ne sait pas comment le rendre et il va tout simplement télécharger le fichier (Chrome, par exemple, a son propre PDF renderer intégré).

cela dit. <iframe> n'est pas la meilleure façon d'afficher un PDF (n'oubliez pas la compatibilité avec les navigateurs mobiles, par exemple Safari). Certains navigateurs toujours ouvrir ce fichier à l'intérieur d'un application externe (ou dans une autre fenêtre du navigateur). La façon la meilleure et la plus compatible que j'ai trouvé est un peu délicate, mais fonctionne sur tous les navigateurs que j'ai essayé (même assez obsolète):

Gardez votre < iframe> mais n'affichez pas de PDF à l'intérieur, il sera rempli d'une page HTML qui se compose d'une étiquette <object> . Créer une page D'emballage HTML pour votre PDF, il doit ressembler à comme ceci: 

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

bien sûr, vous avez encore besoin le plugin approprié installé dans le navigateur. Aussi, jetez un oeil à ce post si vous avez besoin de prendre en charge Safari sur les appareils mobiles.

1er. Pourquoi nicher <embed> à l'intérieur de <object> ? Vous trouverez la réponse ici sur SO . Au lieu de l'étiquette imbriquée <embed> vous pouvez (devrait!) de fournir un message personnalisé pour vos utilisateurs (ou une visionneuse intégrée, voir le paragraphe suivant). De nos jours <object> peut être utilisé sans soucis et <embed> est inutile.

2e. Pourquoi une page HTML? Ainsi, vous pouvez fournir un repli si PDF viewer n'est pas pris en charge. Visualiseur interne, messages D'erreur/options HTML simples et ainsi de suite...

il est difficile de vérifier le support PDF pour que vous puissiez fournir un autre visualiseur pour vos clients, jetez un oeil à PDF.Js projet, il est assez bon, mais la qualité de rendu-pour les navigateurs de bureau - n'est pas aussi bon qu'un natif Rendu PDF (je n'ai pas vu de différence dans les navigateurs mobiles en raison de la taille de l'écran, je suppose).

52
répondu Adriano Repetti 2017-05-23 11:54:25

si le navigateur a un plugin pdf installé, il exécute l'objet, sinon il utilise le visualiseur PDF de Google pour l'afficher en HTML simple: 

<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>
14
répondu mgutt 2017-03-20 16:22:42

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>

objet 

<object data="your_url_to_pdf" type="application/pdf">
  <embed src="your_url_to_pdf" type="application/pdf" />
</object>
5
répondu Muddasir Abbas 2016-02-12 12:18:26