<embed> contre <object>

164

Quelle est la bonne / meilleure balise à utiliser dans mon fichier HTML lorsque je souhaite afficher la visionneuse Adobe PDF?

En ce moment, j'utilise le code ci-dessous, mais il y a des effets secondaires étranges (par exemple, il semble voler le focus de départ que j'ai défini sur une autre zone de <input>texte; il ne semble pas vraiment bien jouer avec la classe jQueryUI Resizeable; etc.)

<embed src="abc.pdf" type="application/pdf" />

Puis-je même faire la même chose avec l' <object>étiquette? Y a-t-il des avantages / inconvénients à utiliser une balise par rapport à l'autre?

html pdf embed-tag

— JayhawksFan93
source

21

Et maintenant avec <embed> en HTML5? Quel est le meilleur moyen?

— VinnyG

@VinnyG <embed>est maintenant officiellement une balise standard avec HTML5, mais vous devez anticiper au moins certains problèmes de compatibilité avec les anciennes versions de navigateur.

— b1nary.atr0phy

169

OBJECT vs EMBED - pourquoi ne pas toujours utiliser l'intégration?

Bottom line: OBJECT est bon, EMBED est vieux. En plus des balises PARAM d'IE, tout contenu entre les balises OBJECT sera rendu si le navigateur ne prend pas en charge le plugin référencé OBJECT, et apparemment, le contenu est demandé par HTTP, qu'il soit rendu ou non.

objectest la balise standard actuelle pour incorporer quelque chose sur une page. embeda été inclus par Netscape (avec img) avant que quelque chose de semblable objectne soit dans l' esprit du w3c .

Voici comment inclure un PDF avecobject :

<object data="data/test.pdf" type="application/pdf" width="300" height="200">
  alt : <a href="data/test.pdf">test.pdf</a>
</object>

Si vous avez vraiment besoin que le PDF en ligne s'affiche dans presque tous les navigateurs, comme les anciens navigateurs le comprennent embedmais pas object, vous devrez le faire:

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

Cette version ne valide pas .

— Esteban Küber
source

47

— Drew LeSueur

7

Même si cela <embed>fait partie de la norme HTML5, il me semble que <object>c'est le meilleur choix en raison de la compatibilité avec les navigateurs plus anciens et de la possibilité d'afficher un contenu alternatif. Pensées?

— Raphael le

4

@raphaelcm Permettez-moi de jouer l'avocat du diable. Si le maintien de la compatibilité avec les navigateurs obsolètes était si important, le HTML n'évoluerait jamais. Ce qui est important ici, c'est la part de marché , en particulier en ce qui concerne les versions de navigateur.

— b1nary.atr0phy

7

Pourquoi est-ce accepté? Je pensais que <embed> était la balise standard HTML5.

— fabspro

2

Je pense que <embed> serait le meilleur choix à l'avenir. C'est dans la norme HTML5 alors qu'Object avait beaucoup de ses fonctionnalités (attributs) obsolètes pour séparer sa fonctionnalité de la balise incorporée. w3schools.com/tags/tag_object.asp Il me semble que la balise d'objet est presque une balise «couteau suisse» tandis que l'intégration est spécialement conçue pour intégrer du contenu dans une page.

— cmaynard

5

Quelques autres options:

<object type="application/pdf" data="filename.pdf" width="100%" height="100%">
</object>

<object type="application/pdf" data="#request.localhost#_includes/filename.pdf" 
        width="100%" height="100%">
  <param name="src" value="#request.localhost#_includes/filename.pdf">
</object>

— aguz
source

3

Vous pouvez également utiliser la méthode iframe, bien que ce ne soit pas compatible avec tous les navigateurs (par exemple, ne fonctionne pas dans Chrome ou Android et probablement d'autres -> invite à télécharger). Cela fonctionne avec les URL de données et les URL normales, vous ne savez pas si les autres exemples fonctionnent avec des URL de données (veuillez me faire savoir si les autres exemples fonctionnent avec des URL de données?)

 <iframe class="page-icon preview-pane" frameborder="0" height="352" width="396" src="data:application/pdf;base64, ..DATAURLHERE!... "></iframe>

— éjectamenta
source

3

La meilleure solution multi-navigateurs pour l'affichage de pdf sur des pages Web est probablement d'utiliser le code de projet Mozilla PDF.js, il peut être exécuté en tant que service node.js et utilisé comme suit

<iframe style="width:100%;height:500px" src="http://www.mysite.co.uk/libs/pdfjs/web/viewer.html?file="http://www.mysite.co.uk/mypdf.pdf"></iframe>

Un tutoriel sur l'utilisation de pdf.js peut être trouvé dans cet article du blog ejectamenta

— éjectamenta
source

1

Incorporer n'est pas une balise standard, bien que l'objet soit. Voici un article qui semble vous aider, car il semble que la situation n'est pas si simple. Un exemple de PDF est inclus.

— aehlke
source

12

L'intégration semble être assez standard pour moi - au moins en HTML5.

— kapa

6

@ bažmegakapa Il est certainement standard maintenant avec HTML5, mais cet article auquel il fait référence a été écrit en 2008 et sa réponse date de 2009, qui est antérieure à HTML5.

— b1nary.atr0phy

2

@ b1naryatr0phy C'est pourquoi j'ai ajouté le commentaire. Il devrait mettre à jour ou supprimer la réponse à mon avis, car elle n'est plus pertinente et n'aidera donc pas les futurs visiteurs.

— kapa le