Repolode
Enviar
wojtekmaj

wojtekmaj/react-pdf

Biblioteca de componentes de React para mostrar archivos PDF en aplicaciones React, renderizando las páginas de forma similar a imágenes con PDF.js.

Ver en GitHubSitio web
Estrellas
11,197
Forks
1,004
Issues abiertos
17
Último commit
hace 10 días

¿Qué es?

React-PDF permite que las aplicaciones React muestren documentos PDF existentes. Los desarrolladores agregan un componente Document con una fuente para el archivo, como una URL, una cadena base64, un Uint8Array o un archivo importado, y colocan componentes Page dentro para renderizar cada página. Está pensado para visualizar PDF, no para generarlos; el proyecto recomienda @react-pdf/renderer para crear PDF desde React.

La biblioteca usa PDF.js de Mozilla para analizar y renderizar los documentos, y se integra con React Suspense y Error Boundaries para gestionar los estados de carga y error. Las hojas de estilos opcionales habilitan la compatibilidad con las capas de anotaciones y texto, y la propiedad options proporciona cMaps, decodificadores de WebAssembly y fuentes estándar para texto no latino y formatos de imagen específicos. El renderizado puede alternar entre los modos canvas, custom y none.

La configuración requiere establecer el worker de PDF.js en el mismo módulo que renderiza los componentes. La rama actual 11.x requiere React 19 o posterior y Node.js 22.13.0 o posterior, y funciona con Preact mediante preact/compat.

Funciones clave

  • 01Renderiza páginas PDF como componentes de React mediante una API de Document y Page.
  • 02Acepta URL, contenido base64, datos Uint8Array y archivos importados como fuentes.
  • 03Se integra con React Suspense y Error Boundaries, y ofrece un modo de carga heredado.
  • 04Admite capas de anotaciones y texto mediante hojas de estilos opcionales.
  • 05Carga cMaps, decodificadores de WebAssembly y fuentes estándar para texto no latino y formatos de imagen especiales.

Casos de uso

  • Mostrar documentos PDF subidos o alojados, como contratos o informes, dentro de una aplicación web de React.
  • Crear un visor PDF personalizado con navegación entre páginas y solicitudes de contraseña.
  • Mostrar vistas previas o miniaturas de PDF con una barra lateral de esquema.

Inicio rápido

  1. 1

    Instala React-PDF con npm

    npm install react-pdf
  2. 2

    Importa Document y Page y renderiza un PDF dentro de Suspense y un Error Boundary

  3. 3

    Configura el worker de PDF.js en el mismo módulo en el que renderizas los componentes PDF

Antes de usarlo

  • La versión más reciente requiere React 19 o posterior.
  • Requiere Node.js 22.13.0 o posterior.
  • Se necesita configuración adicional para cargar el worker de PDF.js y los cMaps para texto en alfabetos no latinos.

En colecciones

Herramientas de PDF, OCR y documentos

Temas

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

Preguntas frecuentes

¿Qué es react-pdf?
Biblioteca de componentes de React para mostrar archivos PDF en aplicaciones React, renderizando las páginas de forma similar a imágenes con PDF.js. React-PDF permite que las aplicaciones React muestren documentos PDF existentes. Los desarrolladores agregan un componente Document con una fuente para el archivo, como una URL, una cadena base64, un Uint8Array o un archivo importado, y colocan componentes Page dentro para renderizar cada página. Está pensado para visualizar PDF, no para generarlos; el proyecto recomienda @react-pdf/renderer para crear PDF desde React.
¿react-pdf es gratuito? ¿Qué licencia tiene?
react-pdf es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿react-pdf sigue mantenido?
Mantenimiento activo. El último commit de react-pdf fue el 28 oct 2026.
¿Para qué puedo usar react-pdf?
Mostrar documentos PDF subidos o alojados, como contratos o informes, dentro de una aplicación web de React. Crear un visor PDF personalizado con navegación entre páginas y solicitudes de contraseña. Mostrar vistas previas o miniaturas de PDF con una barra lateral de esquema.
¿Cómo se instala react-pdf?
Instala React-PDF con npm: npm install react-pdf Importa Document y Page y renderiza un PDF dentro de Suspense y un Error Boundary Configura el worker de PDF.js en el mismo módulo en el que renderizas los componentes PDF
¿Dónde consigo react-pdf?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/wojtekmaj/react-pdf

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados

ahrm / sioyek

Un visor de PDF para libros de texto y artículos de investigación, con saltos inteligentes a figuras y referencias, marcas, portales y teclas al estilo de vim.

Productividad y apps#pdf#pdf-viewer#research-papers
10 mil+13 esta semana400CGPL-3.0Bien mantenidoActualizado hace 4 días