web-dev-qa-db-fra.com

<embed> vs. <objet>

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

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

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

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

htmlpdfembed-tag
151
JayhawksFan93

OBJECT vs. EMBED - pourquoi ne pas toujours utiliser embed?

Conclusion: OBJET est bon, EMBED est vieux. À côté des balises PARAM d'IE, tout contenu entre les balises OBJECT sera rendu si le navigateur ne prend pas en charge le plug-in visé par OBJECT, et apparemment, le contenu reçoit la demande http, qu'il soit rendu ou non.

object est la balise standard actuelle pour intégrer quelque chose sur une page. embed a été inclus par Netscape (le long de img) avant que quelque chose comme object ne soit présent dans l'esprit w3c .

Voici comment vous incluez un PDF avec object :

<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 réellement besoin du PDF intégré dans presque tous les navigateurs, car les anciens navigateurs comprennent embed mais pas object, vous devrez faire ceci:

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

Cette version ne valide pas .

159
Esteban Küber

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

Vous pouvez également utiliser la méthode iframe, bien que cela ne soit pas compatible avec tous les navigateurs (par exemple, ne fonctionne pas en chrome ou Android et probablement d’autres -> invite à télécharger à la place). Cela fonctionne avec les URLs dataURL et normales, ne sachant pas si les autres exemples fonctionnent avec dataURLS (veuillez me laisser savoir si les autres exemples fonctionnent avec dataURLS?)

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

La meilleure solution multi-navigateurs pour l’affichage de pdf sur des pages Web consiste probablement à utiliser le code du 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>

Vous trouverez un tutoriel sur l’utilisation de pdf.js à cette adresse article du blog ejectamenta

2
ejectamenta

Intégrer n'est pas une balise standard, bien que l'objet soit. Voici n article qui a l'air de vous aider, car il semble que la situation ne soit pas si simple. Un exemple pour PDF est inclus.

1
aehlke