HTML PDF intégré iframe

J'ai utilisé la balise pour incorporer un fichier pdf. 

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

Cela fonctionne bien dans Chrome, IE8+, Firefox, etc, mais pour une raison quelconque, lorsque certaines personnes sont en le regardant dans IE8, les fichiers sont à télécharger au lieu de les incorporer. Je sais que ce navigateur est obsolète, mais c'est le navigateur standard à l'intérieur de mon bureau et en tant que tel, le site web doit être conçu pour cela.

Quelqu'un a une idée sur le pourquoi de ce qui se passe, comment je peux le résoudre ou autre mis un message d'erreur au lieu de laisser le téléchargement des fichiers?

InformationsquelleAutor user2931470 | 2013-10-29
  1. 66

    Qu'il est téléchargé probablement car il n'y a pas d'Adobe Reader plug-in installé. Dans ce cas, IE (n'importe quelle version) ne sait pas comment le rendre et il suffit de télécharger le fichier (Chrome, par exemple, dispose de son propre convertisseur PDF intégré).

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

    Garder votre <iframe> mais ne pas afficher un fichier PDF à l'intérieur, ça va être rempli avec une page HTML qui se compose d'une <object> tag. Créer un HTML habillage de la page de votre PDF, il devrait ressembler à comme ce:

    <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 du plug-in approprié installé dans le navigateur. Jetez aussi un oeil à ce post si vous avez besoin de soutien Safari sur des appareils mobiles.

    1er. Pourquoi nidification <embed> à l'intérieur de <object>? Vous trouverez la réponse ici DONC. Au lieu de imbriquée <embed> tag vous pouvez (devez!) 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? De sorte que vous pouvez fournir une solution de secours si PDF viewer n'est pas pris en charge. Visionneuse interne, HTML des messages d'erreur/d'options et ainsi de suite...

    Il est difficile de vérifier la prise en charge de PDF de sorte que vous peut fournir un autre viewer pour vos clients, prendre un coup d'oeil à PDF.JS projet, il est assez bon, mais la qualité du rendu - pour les navigateurs de bureau - n'est-ce pas aussi bon que d'un natif convertisseur PDF (je ne vois pas de différence dans les navigateurs mobiles en raison de la taille de l'écran, je suppose).

    • est-il possible d'afficher uniquement les iframe si il y a le logiciel Adobe Reader plug-in installé, et afficher un message d'erreur si il ne l'est pas?
    • Oui...pas à l'aide d'un "iframe"! L'utilisation d'un "objet", où vous pouvez fournir un message d'erreur (ou une autre vue, voir la dernière partie de ma réponse).
    • Cela fonctionne maintenant, mais le fichier est un zoom avant? J'ai été en utilisant iframe comme cela a permis le fichier pdf afin de l'adapter à la largeur de la div.
    • Il est même maintenant, mais vous devez appliquer le style de CHAQUE élément imbriqué (html, du corps, de l'objet). Comme d'habitude...
    • Ne incorporation dans un objet fonctionne sur Chrome Mobile pour Android?
    • malheureusement Chrome Mobile semble manquer le natif de la visionneuse PDF. Quand je intégrez dans un <object/> il rend une boîte grise avec le texte "Ce plugin n'est pas pris en charge". Je suis maintenant à la recherche pour voir si un plugin peut être installé sur l'appareil mobile.
    • Pour quiconque a de la difficulté à obtenir des réponses cohérentes comportement sur les navigateurs mobiles voyez ici, ce qui m'a aidé: stackoverflow.com/questions/7437602/...
    • C'est un assez vieux thread. Mis en œuvre la norme iframe et ne voyons pas de problèmes sur les navigateurs les plus courants. N'a le temps de résoudre les problèmes de compatibilité? Est @adriano solution toujours nécessaire?
    • iframe n'est pas pour compatibilité (c'est ce que embed imbriquée à l'intérieur de l'objet et de l'OMI, oui, il peut être supprimé) bits pour fournir une solution de secours quand il n'y a pas un module installé dans (ou pour des configurations spécifiques de trucs).
    • n'balises embed et object ne fonctionne que pour un ensemble spécifique de types de fichiers. J'ai essayé d'aller dans les docs pour essayer et obtenir le bon type . Mes fichiers sont dans différents formats de doc, docx, pdf. iana.org/assignments/media-types/media-types.xhtml
    • je suis actuellement toujours une erreur disant que le plugin n'est pas pris en charge pour certains de ces formats. Il semble fonctionner pour de simples img/ jpeg formats.

    InformationsquelleAutor Adriano Repetti
  2. 26

    Si le navigateur a un pdf plugin installé, il exécute l'objet, si ce n'est qu'il utilise Google Visionneuse PDF pour l'afficher au format HTML:

    <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>
    • Ce serait un travail comme un charme, mais je reçois beaucoup de No Preview Available l'utilisation de google documents
    • avez-vous remplacer les deux your_url_to_pdf dans mgutt (l'un dans l'objet de données et l'un dans google.com/viewer?
    • docs.google.com/viewer a pdf restriction de taille
    • Cette travaillé excellent pour moi! Merci! +1
    • Ce doit être marqué comme réponse!
    InformationsquelleAutor mgutt
  3. 9

    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>
    • Maintenant, comment déclencher l'impression sur cet objet, l'Impression n'est pas défini?
    • L'iFrame solution ici est tout ce que je nécessaire à l'affichage d'un PDF généré par un MS MVC service principal et retourné comme un point de vue. J'ai essayé toutes les autres solutions et pour une raison quelconque n'a pas fonctionné.
    InformationsquelleAutor Muddasir Abbas