Incorporar PDF em HTML

1. Use a tag embed para incorporar PDF em HTML
2. Use a tag iframe para incorporar PDF em HTML
3. Use a tag object para incorporar PDF em HTML

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>