Incorporar PDF em HTML
-
Use a tag
embed
para incorporar PDF em HTML -
Use a tag
iframe
para incorporar PDF em HTML -
Use a tag
object
para incorporar PDF em HTML
![Incorporar PDF em HTML](/img/HTML/feature-image---embed-pdf.webp)
Neste tutorial, apresentaremos métodos para incorporar PDF em HTML.
Use a tag embed
para incorporar PDF em HTML
HTML oferece uma tag embed
para incorporar recursos externos na página da web. Podemos incorporar recursos externos como PDFs, reprodutores de mídia, páginas da web, etc., usando a tag embed
. A tag tem o atributo src
onde podemos fornecer o caminho do arquivo a ser embutido. Podemos especificar o tipo de arquivo embutido com o atributo type
. Para PDF, o atributo type
deve ser application/pdf
. A tag embed
é uma tag de fechamento automático.
Por exemplo, crie um arquivo denominado files
no diretório onde o arquivo HTML está localizado. Dentro do arquivo files
, um PDF husky.pdf
está localizado. Em HTML, escreva a tag embed
e especifique o caminho files/husky.pdf
no atributo src
. Em seguida, defina o atributo type
como application/pdf
. Dê a largura e altura do PDF de 100%
.
O exemplo abaixo irá gerar o PDF husky.pdf
na página web. O PDF cobrirá a janela de visualização conforme a altura e a largura são definidas como 100%
.
A tag embed
pode não ser compatível com todos os navegadores modernos. O navegador Chrome Android não suporta a incorporação de PDF. Nesses casos, podemos usar o Visualizador de PDF do Google Drive. Devemos remover o atributo type
e definir o URL do Google Drive do PDF. Desta forma, podemos incorporar PDF em HTML.
Código de exemplo:
<embed src="files/husky.pdf" type="application/pdf" width="100%" height="100%" />
Use a tag iframe
para incorporar PDF em HTML
A tag HTML iframe
permite-nos incorporar outros documentos no arquivo HTML. Podemos usá-lo para incorporar PDF em HTML. Podemos especificar o caminho do arquivo PDF no atributo src
. Podemos definir a altura e a largura do PDF dentro da tag.
Por exemplo, escreva a tag iframe
e defina o atributo src
como files/husky.jpg
. Husky.jpg
é o arquivo PDF a ser incorporado que se encontra no diretório files
. O arquivo HTML e o diretório files
estão no mesmo diretório. Defina a altura e a largura do PDF como 100%
. O PDF cobrirá a janela de visualização. Usar a tag iframe
fornece uma barra de rolagem vertical para o PDF. Desta forma, podemos embutir um arquivo PDF em HTML usando a tag iframe
.
Código de exemplo:
<iframe src="files/husky.pdf" height="100%" width="100%"></iframe>
Use a tag object
para incorporar PDF em HTML
Também podemos usar a tag object
para incorporar PDF em HTML. A tag object
definirá um container que um recurso externo usará. Os recursos externos podem ser PDF, mídia, páginas da web, etc. Podemos definir o caminho do arquivo no atributo dados
. Da mesma forma, como os métodos acima, podemos definir a altura e a largura do contêiner a partir da própria tag. Assim, podemos embutir PDF em HTML usando a tag object
.
Código de exemplo:
<object data="files/husky.pdf" height="100%" width="100%"></object>
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn