Repolode
Enviar
wojtekmaj

wojtekmaj/react-pdf

Biblioteca de componentes React para exibir arquivos PDF em apps React, renderizando páginas como imagens, com base no PDF.js.

Ver no GitHubSite
Estrelas
11,198
Forks
1,004
Issues abertas
17
Último commit
há 10 dias

O que é?

React-PDF permite que aplicações React exibam documentos PDF existentes. Os desenvolvedores adicionam um componente Document com uma origem para o arquivo, como uma URL, uma string em base64, um Uint8Array ou um arquivo importado, e colocam componentes Page dentro dele para renderizar cada página. A biblioteca é voltada à visualização de PDFs, não à criação deles; o projeto recomenda @react-pdf/renderer para gerar PDFs a partir de React.

A biblioteca usa o PDF.js, da Mozilla, para analisar e renderizar os documentos, e se integra ao React Suspense e aos Error Boundaries para lidar com estados de carregamento e erro. Folhas de estilo opcionais habilitam o suporte a camadas de anotações e de texto, e a prop options fornece cMaps, decodificadores WebAssembly e fontes padrão para textos não latinos e formatos de imagem específicos. A renderização pode alternar entre os modos canvas, custom e none.

A configuração exige definir o worker do PDF.js no mesmo módulo que renderiza os componentes. A versão atual da linha 11.x requer React 19 ou posterior e Node.js 22.13.0 ou mais recente, e funciona com Preact por meio de preact/compat.

Recursos principais

  • 01Renderiza páginas de PDF como componentes React usando a API Document e Page.
  • 02Aceita URLs, conteúdo em base64, dados Uint8Array e arquivos importados como fontes.
  • 03Integra-se ao React Suspense e aos Error Boundaries, com um modo legado de carregamento disponível.
  • 04Oferece suporte a anotações e camadas de texto por meio de folhas de estilo opcionais.
  • 05Carrega cMaps, decodificadores WebAssembly e fontes padrão para textos não latinos e formatos de imagem especiais.

Casos de uso

  • Exibir documentos PDF enviados ou hospedados, como contratos e relatórios, dentro de um app web em React.
  • Criar um visualizador de PDF personalizado com navegação entre páginas e solicitações de senha.
  • Exibir prévias ou miniaturas de PDFs com uma barra lateral de estrutura de tópicos.

Início rápido

  1. 1

    Instale React-PDF com npm

    npm install react-pdf
  2. 2

    Importe Document e Page e renderize um PDF dentro de Suspense e de um Error Boundary

  3. 3

    Configure o worker do PDF.js no mesmo módulo em que você renderiza os componentes PDF

Antes de usar

  • A versão mais recente requer React 19 ou posterior.
  • Requer Node.js 22.13.0 ou posterior.
  • É necessária uma configuração adicional para carregar o worker do PDF.js e os cMaps para textos em alfabetos não latinos.

Em coleções

Ferramentas de PDF, OCR e documentos

Tópicos

#pdf#pdf-viewer#react#javascript#typescript#frontend-components

Perguntas frequentes

O que é react-pdf?
Biblioteca de componentes React para exibir arquivos PDF em apps React, renderizando páginas como imagens, com base no PDF.js. React-PDF permite que aplicações React exibam documentos PDF existentes. Os desenvolvedores adicionam um componente Document com uma origem para o arquivo, como uma URL, uma string em base64, um Uint8Array ou um arquivo importado, e colocam componentes Page dentro dele para renderizar cada página. A biblioteca é voltada à visualização de PDFs, não à criação deles; o projeto recomenda @react-pdf/renderer para gerar PDFs a partir de React.
react-pdf é gratuito? Qual é a licença?
react-pdf é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
react-pdf ainda é mantido?
Manutenção ativa. O último commit de react-pdf foi em 28 de out. de 2026.
Para que posso usar react-pdf?
Exibir documentos PDF enviados ou hospedados, como contratos e relatórios, dentro de um app web em React. Criar um visualizador de PDF personalizado com navegação entre páginas e solicitações de senha. Exibir prévias ou miniaturas de PDFs com uma barra lateral de estrutura de tópicos.
Como instalar react-pdf?
Instale React-PDF com npm: npm install react-pdf Importe Document e Page e renderize um PDF dentro de Suspense e de um Error Boundary Configure o worker do PDF.js no mesmo módulo em que você renderiza os componentes PDF
Onde consigo react-pdf?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/wojtekmaj/react-pdf

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados

ahrm / sioyek

Visualizador de PDF para livros didáticos e artigos de pesquisa, com saltos inteligentes para figuras e referências, marcações, portais e teclas no estilo do vim.

Produtividade e apps#pdf#pdf-viewer#research-papers
10 mil+11 esta semana400CGPL-3.0Bem mantidoAtualizado há 3 dias