Introdução

Dias atrás precisei inserir um pdf pra ser visualizado dentro da aplicação em que estava trabalhando. Era uma aplicação em React e, por isso, fui pesquisar como inserir um PDF em React. Aprendi que se insere uma visualização de PDF no React da mesma forma que se insere em uma página HTML pura, como veremos a seguir.

A reflexão

Por vezes tornamos nossa pesquisa demasiadamente específica. Acabei demorando mais tempo do que deveria para encontrar a solução, pois estava buscando por “inserir PDF em React” ao invés de “inserir PDF em HTML”. A conclusão é que por vezes uma pesquisa mais genérica, buscando o jeito mais simples de resolver um problema, pode ser mais eficiente.

O código

O código é bem simples, basta criar um elemento <object> e passar o caminho do arquivo PDF (seja um caminho interno ou uma URL externa) como atributo data:

<object data="exemplo.pdf" type="application/pdf" width="1280"
  height="720" aria-label="PDF de exemplo">
  <p>Houve um erro ao carregar o PDF. 
    <a href="exemplo.pdf"
    aria-label="link para download do PDF de exemplo">
      Clique aqui para abrir o arquivo.
    </a>
  </p>
</object>

As alternativas

Existem outras formas de inserir um PDF em React, como os componentes <iframe> ou <embed>. No caso do <embed> há uma desvatagem em relação aos demais, pois não permite a inserção de filhos, útil quando o arquivo não estiver acessível por algum motivo. Destaco também o aviso que o <embed> foi descontinuado em alguns navegadores na documentação da Mozilla sobre a tag. Contudo, talvez seja uma confusão com o <embed> para inserir conteúdos específicos como Flash, que foi descontinuado. Destaco também que no caso do <embed> no lugar de data, usa-se o atributo src.

Referências

• The <embed> and <object> elements
• <iframe> vs <object> vs <embed>