Toggle theme
Light
Dark
Auto
Conceitos
Fundamentos da Tecnologia
Desenvolvimento de Software
Redes e Infraestrutura
Inteligência Artificial
Ciência de Dados
Hardware e Arquitetura
Blockchain e Criptomoedas
Segurança Cibernética
Tecnologias de Pagamento
Tutoriais
Git
Inteligência Artificial
Java
JavaScript
Node.js
PHP
Python
React
SQL
SRE
IA Aplicada
Artes Digitais
Finanças
Área jurídica
Home
Tutoriais
React
Voltar para
Bibliotecas e Ferramentas Complementares
Como exibir documentos PDF no React sem precisar de um plugin externo?
Aprenda a exibir PDFs no React de maneira eficiente
Saiba como trabalhar com arquivos PDF no React de forma simples e prática.
Neste tutorial:
Como exibir documentos PDF no React sem precisar de um plugin externo?
O que são documentos PDF?
Como carregar um arquivo PDF no React
Considerações sobre o uso de
</a></li><li><a aria-current="true" href='#Usando_a_biblioteca_reactpdf'>Usando a biblioteca react-pdf</a></li><li><a aria-current="true" href='#Vantagens_de_usar_reactpdf'>Vantagens de usar react-pdf</a></li><li><a aria-current="true" href='#Conclusao'>Conclusão</a></li><li><a aria-current="true" href='#Proximos_passos'>Próximos passos</a></li></ul></li> <li class="py-1 py-md-0 content-contextual-text"><a href="#context">Entenda a importância de exibir PDFs em aplicações React</a> <ul class="ps-1 mb-0 content-applications"> <li class="py-1 py-md-0"><a href="#aplications">Aplicações</a> </ul> </li> <li class="py-1 py-md-0 content-tips"><a href="#tips">Dicas para iniciantes</a></li> </ul> </div> </div> </div> </div> <div> <style type="text/css"> .sticky-temas { top: 2rem; border: 1px solid var(--bs-border-color-translucent); border-radius: 1em; padding: 0px 0px !important; } .sticky-temas .list-themes { color: var(--bs-body-color); font-size: 1em; padding-left: 20px; margin: 0px; padding-top: 10px !important; padding-bottom: 10px !important; display: block; } .sticky-temas .link-sticky-temas { color: var(--bs-body-color); border-top: 1px solid var(--bs-border-color-translucent); display: block; } ul.list-categories { margin-top: 0em; padding-left: 1em; padding-bottom: 1em; margin-bottom: 0px; } .link-sticky-react { border-bottom: 0px; } .link-sticky-temas:first-child { border-top: none; } span.py-1.list-themes::after { font-family: bootstrap-icons !important; content: "\f282"; display: inline-block; font-style: normal; font-weight: 400 !important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -.17em; -webkit-font-smoothing: antialiased; margin-left: 6px; } .button-list-categorias { display: block; } </style> </div> </div> </div> <div class="col-md-8 order-last order-md-2"> <article class="blog-post" id="article"> <h2 id='Como_exibir_documentos_PDF_no_React_sem_precisar_de_um_plugin_externo'>Como exibir documentos PDF no React sem precisar de um plugin externo?</h2> <p>Exibir documentos PDF em uma aplicação React pode parecer um desafio, mas com as ferramentas certas, isso pode ser feito de forma simples e eficaz. Neste tutorial, iremos explorar as melhores práticas para mostrar arquivos PDF em suas aplicações, sem a necessidade de plugins externos. Vamos lá!</p> <h3 id='O_que_sao_documentos_PDF'>O que são documentos PDF?</h3> <p>Os PDFs (Portable Document Format) são um formato de arquivo muito utilizado para documentos, pois preservam a formatação original. Eles são amplamente utilizados na distribuição de e-books, manuais e formulários. Por serem um formato universal, a maioria dos navegadores e dispositivos pode abrir arquivos PDF, tornando-os uma excelente escolha para compartilhar informações.</p> <h3 id='Como_carregar_um_arquivo_PDF_no_React'>Como carregar um arquivo PDF no React</h3> <p>Para exibir um PDF em uma aplicação React, você pode utilizar a tag <code><iframe></code>, que permite incorporar outros documentos em sua página. Aqui está um exemplo simples:</p> <pre><code class="language-javascript">import React from 'react'; const PdfViewer = () => { return ( <iframe src='URL_DO_SEU_PDF_AQUI' style={{width: '100%', height: '500px'}} title='PDF Viewer' /> ); }; export default PdfViewer;</code></pre> <p>No código acima, você deve substituir <code>URL_DO_SEU_PDF_AQUI</code> pela URL do seu arquivo PDF. O estilo aplicado ao <code><iframe></code> garante que ele ocupe toda a largura disponível, com uma altura de 500 pixels.</p> <p>Esse método é muito prático e funciona bem para a maioria dos casos, mas existem algumas considerações que precisamos ter em mente.</p> <h3 id='Consideraces_sobre_o_uso_de_ltiframegt'>Considerações sobre o uso de <code><iframe></code></h3> <p>Embora o uso de <code><iframe></code> seja uma solução rápida, existem algumas limitações. Por exemplo, nem todos os navegadores podem oferecer uma experiência de visualização ideal. Além disso, a interação com o conteúdo do PDF pode ser limitada. Se você precisar de uma solução mais robusta, considere usar a biblioteca <code>react-pdf</code>.</p> <h3 id='Usando_a_biblioteca_reactpdf'>Usando a biblioteca <code>react-pdf</code></h3> <p>A biblioteca <code>react-pdf</code> é uma das opções mais populares para trabalhar com PDFs em React. Para utilizá-la, primeiro, você precisa instalá-la:</p> <pre><code class="language-bash">npm install @react-pdf/renderer</code></pre> <p>Após a instalação, você pode começar a usar os componentes fornecidos pela biblioteca. Aqui está um exemplo básico:</p> <pre><code class="language-javascript">import React from 'react'; import { Document, Page, pdfjs } from 'react-pdf'; pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; const PdfViewer = () => { return ( <Document file='URL_DO_SEU_PDF_AQUI'> <Page pageNumber={1} /> </Document> ); }; export default PdfViewer;</code></pre> <p>Neste exemplo, substitua <code>URL_DO_SEU_PDF_AQUI</code> pela URL do seu PDF. A biblioteca carrega o PDF e renderiza a primeira página. Você pode adicionar mais páginas conforme necessário, utilizando o componente <code><Page /></code> com o número da página desejada.</p> <h3 id='Vantagens_de_usar_reactpdf'>Vantagens de usar <code>react-pdf</code></h3> <ul> <li><strong>Interatividade</strong>: A biblioteca permite uma interação melhor com o conteúdo, como navegar entre páginas.</li> <li><strong>Customização</strong>: Você pode estilizar a visualização do PDF de acordo com a sua aplicação.</li> <li><strong>Suporte a múltiplas páginas</strong>: Exibir várias páginas de um PDF é mais simples e direto.</li> </ul> <h3 id='Conclusao'>Conclusão</h3> <p>Neste tutorial, abordamos duas abordagens para exibir PDFs em aplicações React: o uso da tag <code><iframe></code> e a biblioteca <code>react-pdf</code>. Cada método tem suas vantagens e desvantagens, e a escolha entre um ou outro dependerá das necessidades da sua aplicação.</p> <h3 id='Proximos_passos'>Próximos passos</h3> <p>Agora que você já sabe como exibir PDFs em React, experimente implementar essas soluções em seus projetos e veja qual delas se adapta melhor às suas necessidades. Não hesite em explorar mais sobre a biblioteca <code>react-pdf</code>, pois ela oferece muitas funcionalidades adicionais que podem ser úteis em aplicações mais complexas. Vamos colocar a mão na massa e começar a criar aplicações incríveis com React!</p> <div class="spacer my-4" style="border-bottom: 1px solid var(--bs-border-color-translucent);"></div> <h2 class="display-7 link-body-emphasis mb-1 fw-semibold" id="context">Entenda a importância de exibir PDFs em aplicações React</h2><p><p>Exibir documentos PDF em aplicações web é uma necessidade comum, especialmente para empresas e desenvolvedores que lidam com informações em formatos digitais. O React, como uma das bibliotecas JavaScript mais populares, oferece várias opções para implementar essa funcionalidade. Ao escolher a abordagem certa, é possível garantir que seus usuários tenham uma experiência fluida e eficiente ao interagir com documentos PDF. Neste texto, exploramos desde a implementação básica até soluções mais sofisticadas, tudo para garantir que você saiba como utilizar PDFs em suas aplicações React.</p></p> <h3 id="aplications">Algumas aplicações:</h3><ul><li>Visualização de e-books</li><li>Exibição de manuais de usuário</li><li>Apresentação de formulários preenchíveis</li><li>Distribuição de relatórios e documentos oficiais</li></ul> <div class="spacer my-4" style="border-bottom: 1px solid var(--bs-border-color-translucent);"></div> <h2 id="tips">Dicas para quem está começando </h2><ul><li>Teste diferentes navegadores para garantir compatibilidade.</li><li>Explore as funcionalidades da biblioteca react-pdf para maior interatividade.</li><li>Utilize PDFs otimizados para web para melhorar o desempenho.</li></ul> <div class="spacer my-4" style="border-bottom: 1px solid var(--bs-border-color-translucent);"></div> <div class="col-12"> <p>Contribuições de <b>Gabriel Nogueira</b></p> </div> <div class="spacer my-4" style="border-bottom: 1px solid var(--bs-border-color-translucent);"></div> <div class="card-share-article bg-body-tertiary rounded-4 overflow-hidden mb-4" style="border: 1px solid var(--bs-border-color-translucent);"> <img src="https://conceitos.tech/img/tutoriais/react/como-exibir-documentos-pdf-no-react-sem-precisar-de-um-plugin-externo.webp" class="img-fluid" alt="Compartilhe este tutorial: Como exibir documentos PDF no React sem precisar de um plugin externo?"> <div class="card-share-article-bottom px-4 py-3"> <div class="row py-3 d-flex "> <div class="col-12 col-md-6 p-0 ps-2 ps-md-3"> <h3 class="mt-2 mb-2 fw-lighter" style="font-size: 1.25em">Compartilhe este tutorial</h3> </div> <div class="col-12 col-md-6 p-0 align-middle ps-2 ps-md-3 text-start text-md-end pe-2 pe-md-3"> <a href="https://twitter.com/intent/tweet?url=https://conceitos.tech/tutoriais/react/bibliotecas-ferramentas/como-exibir-documentos-pdf-no-react-sem-precisar-de-um-plugin-externo/&text=Veja%20este%20tutorial:%20" target="_blank" rel="noopener noreferrer" aria-label="Compartilhar no X (antigo Twitter)"> <i class="bi bi-twitter-x"></i> </a> <!-- WhatsApp --> <a href="https://api.whatsapp.com/send?text=Veja%20este%20tutorial:%20https://conceitos.tech/tutoriais/react/bibliotecas-ferramentas/como-exibir-documentos-pdf-no-react-sem-precisar-de-um-plugin-externo/" target="_blank" rel="noopener noreferrer" aria-label="Compartilhar no whatsapp"> <i class="bi bi-whatsapp"></i> </a> <!-- LinkedIn --> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://conceitos.tech/tutoriais/react/bibliotecas-ferramentas/como-exibir-documentos-pdf-no-react-sem-precisar-de-um-plugin-externo/&title=Veja%20esse%20conte%C3%BAdo%20interessante&summary=Um%20resumo%20legal%20sobre%20o%20conte%C3%BAdo&source=exemplo.com" target="_blank" rel="noopener noreferrer" aria-label="Compartilhar no linkedin"> <i class="bi bi-linkedin"></i> </a> </div> </div> </div> </div> </article> <div class="spacer my-5" style="border-bottom: 1px solid var(--bs-border-color-translucent);"></div> <div class="container gx-0"> <div class="row mb-3 mt-1"> <h4>Continue aprendendo:</h4> </div> <div class="row row-cols-2 gx-3 gy-3 gs-0"> <div class="col-12 col-sm-6 col-md-6" > <div class="card bg-body-secondary rounded-3" > <div class="card-body"> <h4 class="card-title fw-bold">Como gerar e baixar arquivos PDF no React usando react-pdf?</h4> <p class="card-text">Tutorial completo sobre como gerar e baixar arquivos PDF em aplicações React usando a biblioteca react-pdf.</p> <a href="/tutoriais/react/bibliotecas-ferramentas/como-gerar-e-baixar-arquivos-pdf-no-react-usando-react-pdf/" class="text-left btn btn-primary btn-previous w-100 btn-card">Tutorial anterior</a> </div> </div> </div> <div class="col-12 col-sm-6 col-md-6" > <div class="card bg-body-secondary rounded-3" > <div class="card-body"> <h4 class="card-title fw-bold">Como processar imagens no React usando sharp.js?</h4> <p class="card-text">Um guia completo sobre como utilizar sharp.js para manipulação de imagens no React.</p> <a href="/tutoriais/react/bibliotecas-ferramentas/como-processar-imagens-no-react-usando-sharpjs/" class="text-left btn btn-primary w-100 btn-card" style="text-align:left">Próximo tutorial</a> </div> </div> </div> </div> </div> <div class="mt-5"> <a href="/tutoriais/react/bibliotecas-ferramentas"><i class="bi bi-chevron-left"></i>Voltar para Bibliotecas e Ferramentas Complementares</a> </div> </div> </div> </main> <footer class=" text-center bg-body-tertiary" style="margin-top: 0px;"> <div class="container-fluid"> <div class="container py-5 pb-5 bg-body-tertiary "> <div class="row"> <div class="col-sm-12 col-md-8 d-flex align-items-center"> <div class="text-start" ><img loading="lazy" id="footerLogo" src="/img/logo-conceitos-tech.svg" alt="Logo Conceitos Tech" class="img-fluid align-middle"><br> <a href="/sobre-nos/" class=" align-middle mt-4 btn btn-secondary" style="display: inline-block">Sobre nós</a><a href="/contato/" class=" align-middle btn btn-secondary mt-4 ms-2" style="display: inline-block">Contato</a></div> </div> <div class="col-sm-12 col-md-4 d-flex align-items-center mt-4 mt-md-0 text-end"> <img loading="lazy" src="/img/safe-browsing.webp" alt="Navegação segura" class="img-fluid text-end" style="max-width: 200px;"> </div> </div> </div> <div class="container py-5 bg-body-tertiary"style="border-top: 1px solid var(--bs-border-color-translucent);"> <div class="row"> <div class="col-sm-12 col-md-4 px-2 px-sm-0 p-sm-0 text-start" > <h5>Conceitos:</h5> <a href="/fundamentos-da-tecnologia/"style="display:block">Fundamentos da Tecnologia</a><a href="/desenvolvimento-de-software/"style="display:block">Desenvolvimento de Software</a><a href="/redes-e-infraestrutura/"style="display:block">Redes e Infraestrutura</a><a href="/inteligencia-artificial/"style="display:block">Inteligência Artificial</a><a href="/ciencia-de-dados/"style="display:block">Ciência de Dados</a><a href="/hardware-e-arquitetura/"style="display:block">Hardware e Arquitetura</a><a href="/blockchain-e-criptomoedas/"style="display:block">Blockchain e Criptomoedas</a><a href="/seguranca-cibernetica/"style="display:block">Segurança Cibernética</a><a href="/tecnologias-de-pagamento/"style="display:block">Tecnologias de Pagamento</a> </div> <div class="col-sm-12 col-md-4 px-2 px-sm-0 pt-4 pt-sm-0 text-start" > <h5>Tutoriais:</h5> <a href="/tutoriais/git/"style="display:block">Git</a><a href="/tutoriais/inteligencia-artificial/"style="display:block">Inteligência Artificial</a><a href="/tutoriais/java/"style="display:block">Java</a><a href="/tutoriais/javascript/"style="display:block">JavaScript</a><a href="/tutoriais/nodejs/"style="display:block">Node.js</a><a href="/tutoriais/php/"style="display:block">PHP</a><a href="/tutoriais/python/"style="display:block">Python</a><a href="/tutoriais/react/"style="display:block">React</a><a href="/tutoriais/sql/"style="display:block">SQL</a><a href="/tutoriais/sre/"style="display:block">SRE</a> </div> <div class="col-sm-12 col-md-4 px-2 px-sm-0 pt-4 pt-sm-0 text-start" > <h5>IA Aplicada:</h5> <a href="/ia-aplicada/artes-digitais/"style="display:block">Artes Digitais</a><a href="/ia-aplicada/financas/"style="display:block">Finanças</a><a href="/ia-aplicada/area-juridica/"style="display:block">Área jurídica</a> </div> </div> </div> </div> </div> <div class="container-fluid py-2 bg-body-primary" style="border-top: 1px solid var(--bs-border-color-translucent);"> <p class="m-0"><a href="/politica-de-privacidade/">Política de privacidade</a></p> </div> </footer> <link href="/assets/dist/css/bootstrap-complement.min.css?1.3541" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz@0,14..32;1,14..32&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,600;1,14..32,600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,800;1,14..32,800&display=swap" rel="stylesheet"> <style type="text/css"> .inter-<uniquifier> { font-family: "Inter", serif; font-optical-sizing: auto; font-weight: 800; font-style: normal; } </style> <script language="JavaScript" type="text/JavaScript"> window.onload = function() { // Verifica se a URL contém o parâmetro 'search-term' const urlParams = new URLSearchParams(window.location.search); const searchTerm = urlParams.get('search-term'); // Obtém o valor de 'search-term' // Se o parâmetro 'search-term' estiver presente, preenche o campo de input if (searchTerm) { document.getElementById('formSearchInput').value = "null"; } // Evento de envio do formulário document.getElementById("formSearch").onsubmit = function() { var Termo = document.getElementById('formSearchInput').value; // Substitui espaços por hífens Termo = Termo.replace(/\s+/g, '-'); // A regex \s+ encontra todos os espaços e os substitui por - // Verifica se o termo tem mais de 2 caracteres e não começa com espaço if (Termo.length > 2 && !Termo.startsWith(" ")) { // Se a condição for atendida, redireciona para a página de pesquisa window.location.replace("/search/?search-term=" + Termo); } else { // Se o termo for inválido, exibe um alerta if (Termo.startsWith(" ")) { alert("O termo não pode começar com um espaço."); } else { alert("Por favor, digite pelo menos 3 caracteres."); } } // Impede o envio do formulário tradicional return false; } } </script><script src="/assets/dist/js/bootstrap.bundle.min.js?version=1.3541"></script> <script src="/assets/js/prism.js?version=1.3541"></script> <link href="/assets/js/prism.css?version=1.3541" rel="stylesheet"> <style> table>tbody>tr:nth-of-type(odd)>* { color: var(--bs-emphasis-color); background-color: rgba(var(--bs-secondary-bg-rgb), 1); } table { width: 100%; display: block; overflow-x: auto; } table>tbody>tr:nth-of-type(even)>* { color: var(--bs-emphasis-color); background-color: rgba(var(--bs-secondary-bg-rgb), .5); } tr { border-color: inherit; border-style: solid; border-bottom: 1px solid var(--bs-border-color-translucent); } </style> </body> </html>