Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Cómo Convertir HTML a PDF en React

Cómo Convertir HTML a PDF en React

Cómo Convertir HTML a PDF en React

Github

En ocasiones necesitamos exportar un contenido de nuestra página HTML a PDF con la librería React.

Para hacer esto debes seguir ciertos pasos importantes.

En este tutorial te enseñaré a Cómo Convertir HTML a PDF en React, vamos con ello.

Con React podemos convertir HTML a PDF de forma rápida

Convirtiendo HTML a PDF con React

Sigue los pasos que te indico a continuación para que todo salga bien:

Creación de nuevo proyecto

Crearé un nuevo proyecto de React con la herramienta Vite, ejecutando el siguiente comando (He colocado comentarios para explicar paso a paso el proceso de creación del proyecto):


Puedes ver que al final elegí la variante TypeScript + SWC.

Esta variante es muy potente, en este artículo te explico porque lo és.

Ingresamos al directorio del proyecto e instalamos las dependencias necesarias:


Puedes ver que sobre el final he colocado el comando npm run dev.

Puedes ejecutarlo, para verificar que todo este bien.

Convertir HTML a PDF con React

Instalamos la librería React-pdf, ejecutando el siguiente comando:


Al comando anterior le he pasado la opción –save para registrar la dependencia en el archivo package.json del proyecto.

De esta manera tenemos un control de lo que instalamos en nuestro proyecto.

Importamos React

Abrimos el archivo App.tsx y comenzamos importando React:

Imagen y Fuente para el PDF

Importamos una imagen y un tipo de letra para el contenido del PDF:

Instanciamos React-pdf

Importamos la librería React-pdf algunos elementos necesarios:

Configuración de la fuente para el PDF

Definimos la fuente que usaremos el  texto del PDF:

Estilos para el PDF

Le damos algunos estilos CSS a nuestro PDF:

Contenido del PDF

Agregamos los elementos que tendrá el contenido del PDF:

Renderizamos el PDF

Mostramos el PDF en la vista:


Eso es todo, ya tenemos nuestro PDF listo creado con React.

Probando el PDF

Iniciamos el servidor de Vite con el siguiente comando:


Si abrimos la ruta local http://localhost:5173/ en el navegador.

Podemos ver que nuestro PDF carga sin problemas:

El PDF tiene 3 páginas, tú puedes agregarle más páginas

Botón Para Descargar el PDF

Creamos una función para descargar el PDF con su contenido:


Luego agregamos el botón para descargar el PDF debajo del visor del PDF:


Si abrimos nuevamente la ruta local http://localhost:5173/ en el navegador.

Podemos ver que debajo del PDF hemos creado un botón para descargarlo:

Puedes darle un estilo personalizado al botón

Así de fácil puedes convertir HTML a PDF con React.

Conclusión

En este tutorial has aprendido a Cómo Convertir HTML a PDF en React.

Te servirá de ayuda para crear archivos PDF en tus proyectos con React.

Practica mucho, así serás un experto en React.

Nota(s)

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil