web-dev-qa-db-pt.com

EMBED vs. OBJECT

Qual é a tag certa/melhor para usar no meu arquivo HTML quando eu quiser exibir o visualizador Adobe PDF? Agora eu estou usando o código abaixo, mas existem efeitos colaterais estranhos (por exemplo, parece roubar o foco inicial que eu defini para outra caixa de texto INPUT; ele não parece jogar muito bem com a classe jQueryUI Resizeable etc)

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

Eu poderia fazer a mesma coisa com a tag OBJECT? Existem vantagens/desvantagens de usar uma tag versus a outra?

146
JayhawksFan93

OBJETO vs EMBED - por que não usar sempre embed?

Resumindo: OBJECT is Good, EMBED é antigo. Ao lado das tags PARAM do IE, qualquer conteúdo entre as tags OBJECT será processado se o navegador não suportar o plug-in referido do OBJECT e, aparentemente, o conteúdo obtém http solicitado, independentemente de ser renderizado ou não.

object é a tag padrão atual para incorporar algo em uma página. embed foi incluído pelo Netscape (junto img) antes que qualquer coisa como object estivesse na mente w3c .

É assim que você inclua um PDF com object :

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

Se você realmente precisa o inline PDF para mostrar em quase todos os navegadores, como navegadores mais antigos entendem embed mas não object, você irá precisa fazer isso:

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

Esta versão não valida .

155
Esteban Küber

Algumas outras opções:

<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

Você também pode usar o método iframe, embora isso não seja compatível com vários navegadores (por exemplo, não está funcionando no chromium ou Android e provavelmente outros -> solicitam o download). Funciona com URLURs de dataURL e normais, não tenho certeza se os outros exemplos funcionam com dataURLS (por favor, deixe-me saber se os outros exemplos funcionam com dataURLS?)

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

Provavelmente, a melhor solução de vários navegadores para exibição de PDF em páginas da Web é usar o código do projeto Mozilla PDF.js, ele pode ser executado como um serviço node.js e usado da seguinte forma

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

Um tutorial sobre como usar o pdf.js pode ser encontrado em ejectamenta blog article

2
ejectamenta

A incorporação não é uma tag padrão, embora o objeto seja. Aqui está m artigo que parece que vai te ajudar, já que parece que a situação não é tão simples. Um exemplo para PDF está incluído.

1
aehlke