Maneiras mais fáceis de incorporar um arquivo PDF em uma página da Web em HTML

Você precisa incluir um PDF em seu documento HTML? Pode ser uma tarefa desafiadora. Incorporar qualquer coisa em HTML é sempre assim. Não se preocupe. Na verdade, é bem simples se você souber como. Este artigo vai te ensinar comoincorporar PDF em HTML. Além disso, os métodos escolhidos são os mais fáceis de seguir.

Por que você precisaria incorporar arquivos de PDF em HTML?

Tem a ver com "acessibilidade".

Como as pessoas compartilhavam arquivos de PDF no passado? As pessoas carregavam eles em algum lugar e então enviavam um link para que as pessoas com quem eles queriam compartilhar o PDF pudessem baixá-lo. Se você já usa computadores a algum tempo você sabe que baixar arquivos pode ser arriscado. Ou eles anexavam os PDFs em e-mails. Isso pode ser cansativo principalmente se o PDF excede o tamanho máximo de e-mails.

Um jeito melhor é incorporar o arquivo de PDF em HTML. Assim você elimina a necessidade de baixar ou enviar o arquivo de PDF para outras pessoas. Elas só precisam acessar o arquivo de PDF incorporado no site. Como os navegadores modernos agora têm recursos de visualização de PDF, as pessoas não precisam mais baixar os arquivos.

Incorporar o PDF no HTML é melhor para empresas, mesmo as menores. Isso garante que todas as pessoas trabalhando na empresa acessem a mesma versão do PDF.

Incorporar PDF em HTML usando o <object> Tag

A tag de objeto em HTML é o primeiro método para incorporar arquivos em PDF. Ele especifica uma fonte externa incorporada em um documento HTML. Essa tag de objeto pode ser uma imagem, um recurso de plug-in ou um contexto agrupado para o usuário navegar. Você pode por exemplo incorporar um PDF em um HTML para apresentar um modelo de documento.

Este exemplo demonstra o uso do elemento de objeto para incorporar um arquivo PDF em HTML.

Passo 1 Anote o link do seu arquivo PDF.

Passo 2 Para um elemento de objeto, adicione um tipo de atributocom o valor aplicativo/pdf.

Passo 3 Para o elemento de objeto, adicione um atributo de dadoscom o valor do link do seu PDF.

Passo 4 Configure a altura e largura para suas especificações.

Aqui está a saída do código de amostra.

O elemento pode incluir:

• Um componente incluído.
• Os dados a apresentar.
• Quaisquer valores adicionais exigidos pelo objeto em tempo de compilação.

Você pode combinar elementos de objeto e usar esse recurso para definir vários objetos para cada navegador. Embora todos os principais navegadores não suportem o elemento de objeto, seu uso é limitado.

Parâmetros da tag do objeto

• Dados:Ele especifica a URL do recurso que o objeto vai usar.
• Tipo: Especifica o tipo de conteúdo do recurso descrito pelos dados.
• Forma: Denota a forma do elemento ao qual o elemento de objeto está relacionado.
• Altura:Especifica a altura do objeto.
• Largura: Especifica a altura do objeto.
• Nome: Ele fornece o nome do objeto.
• O tipo deve corresponder: Ele declara inequivocamente que o recurso deve ser inserido se o atributo type corresponder ao tipo de texto apropriado aos recursos fornecidos no atributo de dados.

Incorporar PDF em HTML usando o <embed> Tag

Para incorporar recursos externos em uma página da Web, o HTML fornece uma tag de embed. Usando a tag de embed, podemos incluir recursos externos, como PDFs, reprodutores de mídia e páginas da web. A tag possui o atributo src, que permite especificar o caminho para o arquivo que será incorporado. O atributo type nos permite especificar o tipo do arquivo incorporado. O atributo type para PDF deve ser aplicativo/pdf. A tag de embed é independente.

Para incorporar um PDF em HTML, por exemplo, siga estes passos:

Passo 1Crie um arquivo chamado arquivos no explorador de arquivos contendo o arquivo HTML. Um arquivo PDF está contido no arquivo de arquivos.

Passo 2 Crie a tag incorporar em HTML e inclua o caminho no atributo src.

Passo 3 Configure o atributo type aplicativo/pdf.

Passo 4 Dê ao PDF uma largura e altura de 100%. Como a altura e a largura estão definidas como 100%, o PDF preencherá toda a janela de visualização.

As variações desse código permitirão que você "puxe" uma página ou um conjunto de páginas de um arquivo PDF de origem e as exiba como conteúdo interativo em uma página da Web normal. A vantagem, neste caso, é que o conteúdo é incorporado ou anexado ao HTML. Não é a melhor maneira de fazer isso, mas pode ser útil em caso de emergência.

Atributos para a tag de embed

A incorporação de HTML é baseada em quatro atributos. Esses atributos especificam o que a incorporação deve fazer.

• Altura: Esses atributos especificam a altura do elemento de conteúdo incorporado. Este valor é expresso em pixels.
• Largura: Esses atributos especificam a largura do elemento de conteúdo incorporado. Este valor é expresso em pixels.
• src: Ele é usado para transportar o URL da Web, que especifica o endereço da Web do conteúdo incorporado.
• Type: Este atributo especifica o tipo de mídia, como vídeo ou áudio.

Alguns navegadores modernos podem não suportar a tag embed. O navegador Android Chrome não suporta a incorporação de PDF. Nesse caso, você pode usar o visualizador de PDF do Google Drive. Você deve remover o atributo type e definir a URL do Google Drive do PDF. Podemos incorporar PDFs em HTML.

Incorporar PDF em HTML usando a tag <iframe>

As tags iframe em HTML são quadros embutidos usados ​​em um documento HTML para incluir outro. É mais comumente usado em páginas da web ou processos de desenvolvimento da web para incluir outro conteúdo de outra fonte, como anúncios, naquela página da web.

Aqui está um exemplo de como incorporar um PDF em HTML usando a tag iframe.

Passo 1 Crie uma tag iframe com o atributo src configurado para arquivos/documento.pdf. Documento.pdf é o arquivo PDF que será incorporado e está localizado no explorador de arquivos.

Passo 2 Confira se o HTML e o explorador de arquivos são os mesmos.

Passo 3 Configure a altura e largura para 100%.

O PDF cobrirá a janela de visualização. O PDF ganha uma barra de rolagem vertical quando a tag iframe é usada. Usando a tag iframe, podemos incorporar um arquivo PDF em HTML. Aqui está o resultado:

O iframe é comumente usado por web designers para apresentar aplicativos interativos em sites ou páginas da web. Isso é possível por meio do uso de JavaScript ou do atributo de destino em HTML.

A principal função de uma tag iframe é exibir uma página da web dentro de outra. O quadro embutido deve ser exibido com a tag iframe. Ele funciona de forma semelhante a um bloco retangular em seu site, onde o navegador pode exibir outro documento com barras de rolagem e bordas.

Atributos da Tag iframe

Tags HTML têm atributos usados ​​para gerenciar e exibir PDFs em iframes HTML. Os atributos são explicados mais abaixo.

• src: Defina o caminho para o arquivo externo a ser incorporado aqui.
• Type: Você pode especificar o tipo de mídia do conteúdo incorporado aqui.
• Largura: A largura do conteúdo incorporado pode ser especificada aqui.
• Altura: Defina a altura do conteúdo incorporado aqui.

Incorporar PDF em HTML Usando PDFelement - Editor de PDF

A melhor maneira de incorporar um PDF em HTML é convertê-lo no equivalente. O código pode então ser colado diretamente no código HTML sempre que necessário. Como o conteúdo do PDF agora está na forma de código responsivo, em vez de dados PDF estáticos, o conteúdo do PDF torna-se verdadeiramente interativo. A seguir estão os passos para converter um PDF em HTML usando PDFelement :

Passo 1 Abra o arquivo PDF que você quer converter para HTML. Arraste e solte o arquivo na janela do software para importá-lo.

Passo 2 Quando você clicar na aba "Converter", você será apresentado a várias opções de conversão: selecione o ícone "H", que significa "Converta seu arquivo PDF em HTML."

Passo 3 Defina quaisquer outros parâmetros necessários, como o número de páginas, e salve o arquivo convertido em HTML.

Passo 4 Agora você pode copiar e colar o código HTML convertido na seção apropriada do código da sua página da web.

Posso usar as tags <embed> e <iframe> para exibir arquivos de vídeo?

Sim. Quando um arquivo de vídeo é incorporado a um documento HTML, ele pode ser reproduzido diretamente no navegador da Web sem a necessidade de um aplicativo reprodutor de vídeo separado.

A incorporação de vídeo HTML também é importante porque permite que os vídeos sejam reproduzidos em dispositivos móveis sem um aplicativo de player de vídeo. Muitos smartphones e tablets, por exemplo, não possuem um aplicativo reprodutor de vídeo javascript, mas ainda podem reproduzir arquivos de vídeo incorporados em um documento HTML. Além disso, a incorporação de vídeo HTML pode criar uma galeria de vídeo, que exibe vários vídeos em uma única página.

A tag embed cria um container para um recurso externo, como uma página da Web, imagem, reprodutor de mídia ou aplicativo de plug-in. O conteúdo é referenciado no atributo src de cada elemento, fazendo dele um recurso completamente independente em relação ao documento atual. Como resultado, a tag embed pode exibir arquivos de vídeo em HTML.

Enquanto isso, o elemento iframe HTML especifica um quadro embutido com seu HTML. Você pode usar este quadro para inserir outra página HTML ou um URL externo na página atual. É comumente usado para incorporar vídeos, anúncios externos, mapas e outras mídias.

Palavras finais

Existem várias formas de incorporar PDF em HTML. O PDFelement é uma delas. O PDFelement não apenas economizará muito tempo, mas também fornecerá aos visitantes do seu site um conteúdo rico e interativo, em vez de um conteúdo PDF chato e estático. Ele melhora a experiência geral do usuário, e é por isso que o PDFelement é o software recomendado para inserir PDF em HTML