<embed> vs. <objeto>

164

¿Cuál es la etiqueta correcta / mejor para usar en mi archivo HTML cuando quiero mostrar el visor de PDF de Adobe?

En este momento estoy usando el código a continuación, pero hay efectos secundarios extraños (por ejemplo, parece robar el enfoque inicial que he establecido en otro <input>cuadro de texto; no parece jugar realmente bien con la clase jQueryUI Resizeable; etc.)

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

¿Podría hacer lo mismo con la <object>etiqueta? ¿Hay ventajas / desventajas de usar una etiqueta frente a la otra?

html pdf embed-tag JayhawksFan93
fuente
21
¿Y ahora con <embed> en HTML5? ¿Cuál es la mejor manera?
VinnyG
@VinnyG <embed>ahora es oficialmente una etiqueta estándar con HTML5, pero debe anticipar al menos algunos problemas de compatibilidad con versiones anteriores del navegador.
b1nary.atr0phy

Respuestas:

169

OBJETO versus EMBED: ¿por qué no usar siempre embebido?

En pocas palabras: OBJETO es bueno, EMBED es viejo. Además de las etiquetas PARAM de IE, cualquier contenido entre las etiquetas OBJECT se representará si el navegador no es compatible con el complemento referido de OBJECT, y aparentemente, el contenido se solicita http independientemente de si se representa o no.

objectes la etiqueta estándar actual para incrustar algo en una página. embedfue incluido por Netscape (a lo largo img) antes de que algo así objectestuviera en la mente del w3c .

Así es como incluye un PDF conobject :

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

Si realmente necesita que el PDF en línea se muestre en casi todos los navegadores, como los navegadores más antiguos entienden embedpero no object, deberá hacer esto:

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

Esta versión no valida .

Esteban Küber
fuente
47
<embed> es en realidad parte de HTML5 dev.w3.org/html5/spec/Overview.html#the-embed-element
Drew LeSueur
77
Aunque <embed>es parte del estándar HTML5, me parece que <object>es la mejor opción debido a la compatibilidad con navegadores antiguos y la capacidad de mostrar contenido alternativo. Pensamientos?
Raphael
44
@raphaelcm Permíteme jugar al abogado del diablo. Si mantener la compatibilidad con los navegadores obsoletos fuera tan importante, el HTML nunca evolucionaría. Lo importante aquí es la cuota de mercado , específicamente con respecto a las versiones del navegador.
b1nary.atr0phy
77
¿Por qué se acepta esto? Pensé que <embed> era la etiqueta estándar HTML5.
fabspro
2
Creo que <embed> sería la mejor opción en el futuro. Está en el estándar HTML5, mientras que Object tenía muchas de sus características (atributos) en desuso para separar su funcionalidad de la etiqueta incrustada. w3schools.com/tags/tag_object.asp Me parece que la etiqueta del objeto es casi una etiqueta de 'navaja suiza', mientras que la incrustación está diseñada específicamente para incrustar contenido en una página.
cmaynard
5

Algunas otras opciones:

<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
fuente
3

También puede usar el método iframe, aunque esto no es compatible con el navegador cruzado (por ejemplo, no funciona en Chrome o Android y probablemente en otros -> en su lugar solicita la descarga). Funciona con dataURL y URLS normales, no estoy seguro si los otros ejemplos funcionan con dataURLS (por favor, avíseme si los otros ejemplos funcionan con dataURLS?)

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

Probablemente, la mejor solución de navegador cruzado para la visualización de PDF en páginas web es usar el código del proyecto Mozilla PDF.js, que puede ejecutarse como un servicio node.js y usarse de la siguiente manera

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

Puede encontrar un tutorial sobre cómo usar pdf.js en este artículo de blog de eyección.

eyectamenta
fuente
1

Incrustar no es una etiqueta estándar, aunque el objeto sí lo es. Aquí hay un artículo que parece que lo ayudará, ya que parece que la situación no es tan simple. Se incluye un ejemplo para PDF.

aehlke
fuente
12
Incrustar parece ser bastante estándar para mí, al menos en HTML5.
kapa
66
@ bažmegakapa Sin duda, ahora es estándar con HTML5, pero ese artículo al que se refiere fue escrito en 2008 y su respuesta es de 2009, anterior a HTML5.
b1nary.atr0phy
2
@ b1naryatr0phy Por eso agregué el comentario. En mi opinión, debería actualizar o eliminar la respuesta, ya que ya no es relevante, por lo que no ayudará a los futuros visitantes.
kapa