web-dev-qa-db-fra.com

HTML incorporé PDF iframe

J'ai utilisé la balise 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 raison quelconque, lorsque certaines personnes le visualisent dans IE8, les fichiers sont téléchargés au lieu d'être intégrés. Je sais que ce navigateur est obsolète, mais il s'agit du navigateur standard de mon bureau et le site Web doit donc être conçu pour cela.

Quelqu'un a-t-il une idée de la raison pour laquelle cela se produit, de la façon dont je peux résoudre le problème ou de mettre un message d'erreur au lieu de laisser les fichiers se télécharger?

htmlpdfiframeinternet-explorer-8
47
user2931470

Il est téléchargé probablement car aucun plug-in Adobe Reader n'est installé. Dans ce cas, IE (quelle que soit la version) ne sait pas comment le restituer et télécharge simplement le fichier (Chrome, par exemple, a son propre fichier PDFincorporé. _ rendu).

Cela dit. <iframe> n'est pas le meilleur moyen d'afficher un PDF (n'oubliez pas la compatibilité avec les navigateurs mobiles, par exemple Safari). Certains navigateurs ouvriront toujours ce fichier dans une application externe (ou dans une autre fenêtre de navigateur). Le meilleur moyen et le plus compatible que j'ai trouvé est un peu délicat, mais fonctionne sur tous les navigateurs que j'ai essayés (même assez périmés):

Conservez votre <iframe>, mais n’affichez pas de PDF, il sera rempli d’une page HTML composée d’une balise <object>. Créez une page d'habillage HTML pour votre PDF, elle devrait ressembler à 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 entendu, vous avez toujours besoin du plug-in approprié installé dans le navigateur. Jetez également un œil à this post si vous devez prendre en charge Safari sur les appareils mobiles.

1er Pourquoi imbriquer <embed> dans <object>? Vous trouverez la réponse ici sur SO . Au lieu de la balise imbriquée <embed>, vous pouvez (devriez!) Attribuer un message personnalisé à vos utilisateurs (ou un visualiseur intégré, voir le paragraphe suivant). De nos jours, <object> peut être utilisé sans souci et <embed> est inutile.

2ème. Pourquoi une page HTML? Vous pouvez donc fournir une solution de secours si le visualiseur PDF n'est pas pris en charge. Afficheur interne, messages d’erreur/options HTML simples, etc.

Il est difficile de vérifier le support PDF, vous pouvez donc fournir un autre visualiseur à vos clients. Consultez le projet PDF.JS , c'est assez bon mais la qualité de rendu est satisfaisante - pour les navigateurs de bureau - n'est pas aussi bon qu'un rendu natif PDF (je n'ai vu aucune différence dans les navigateurs mobiles en raison de la taille de l'écran, Je suppose).

68
Adriano Repetti

Si le navigateur a un plugin pdf installé, il exécute l'objet, sinon il utilise le PDF Viewer de Google pour l'afficher en tant que 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>
28
mgutt

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>
9
Muddasir Abbas