Generación de PDF en React JS con jspdf

¡Bienvenidos de nuevo, lectores! En este tutorial paso a paso, nos sumergiremos en el mundo de la generación de PDF en React JS utilizando jspdf. Específicamente, construiremos juntos una aplicación sencilla para generar currículums. Al finalizar este tutorial, tendrán un sólido conocimiento sobre cómo incorporar jspdf en sus proyectos de React y crear documentos PDF dinámicos. ¡Comencemos!

Paso 1: Configuración del proyecto

Lo primero que debemos hacer es configurar nuestro proyecto. Primero, nos vamos a aregurar de tener Node.js y npm instalados en el sistema. Para esto abriremos un terminal y escribiremos node -v y npm -v. debajo dejo el ejemplo siguiente:

~ node -v
v16.17.0

~npm -v
8.15.0

Ahora que sabemos que NodeJs y npm estan instalados, continuaremos en la terminal y crearemos un nuevo proyecto de React. Escribe los siguientes comandos:

npx create-react-app generador-de-curriculums
cd generador-de-curriculums
npm start

Los comandos anteriores por linea se describen como: npx create-react-app generador-de-curriculums crea una nueva aplicación web con react dentro de una carpeta llamada generador-de-curriculums. Una vez terminado de instalar entraremos a la nueva carpeta usando la segunda linea de arriba: cd generador-de-curriculums. Y para ejecutar la aplicación web usamos npm start. En el video debajo, podrán ver lo mismo en acción.

Paso 2: Instalación de jsPDF

Ahora que tenemos nuestro proyecto de React configurado, necesitamos instalar jsPDF. Vamos a la carpeta de nuestro proyecto en la terminal y ejecutamos el siguiente comando:

npm install jspdf

Paso 3: Creación del componente ResumeBuilder

Con jspdf instalado, es hora de crear nuestro componente ResumeBuilder. Abre la carpeta ‘src’ de tu proyecto y crea un nuevo archivo llamado ‘ResumeBuilder.js’. Comencemos configurando la estructura básica de nuestro componente.

import React from 'react';

const ResumeBuilder = () => {

};

export default ResumeBuilder;

Paso 4: Agregar estado e inputs de formulario

Para crear un currículum dinámico, necesitamos recolectar información del usuario. Agreguemos algunas variables de estado e inputs de formulario a nuestro componente ResumeBuilder.

import React, { useState } from 'react';

const ResumeBuilder = () => {
  const [nombre, setNombre] = useState('');
  const [email, setEmail] = useState('');
  const [experiencia, setExperiencia] = useState('');

  const handleNombreChange = (event) => {
    setNombre(event.target.value);
  };

  const handleEmailChange = (event) => {
    setEmail(event.target.value);
  };

  const handleExperienciaChange = (event) => {
    setExperiencia(event.target.value);
  };

  return (
    <div>
      <h1>Generador de Currículums</h1>
      <form>
        <label>Nombre:</label>
        <input type="text" value={nombre} onChange={handleNombreChange} />
        <label>Email:</label>
        <input type="email" value={email} onChange={handleEmailChange} />
        <label>Experiencia:</label>
        <textarea value={experiencia} onChange={handleExperienciaChange} />
      </form>
    </div>
  );
};

export default ResumeBuilder;

Paso 5: Generación del PDF

Ahora, agreguemos la funcionalidad para generar un documento PDF utilizando jspdf. Crearemos una función llamada ‘generatePDF’ y la invocaremos cuando el usuario haga clic en un botón.

import React, { useState } from 'react';
import jsPDF from 'jspdf';

const ResumeBuilder = () => {


  const generatePDF = () => {
    const doc = new jsPDF();
    doc.text(`Nombre: ${nombre}`, 10, 10);
    doc.text(`Email: ${email}`, 10, 20);
    doc.text(`Experiencia: ${experiencia}`, 10, 30);
    doc.save('curriculum.pdf');
  };

  return (
    <div>
      <h1>Generador de Currículums</h1>
      <form>
        {}
      </form>
      <button onClick={generatePDF}>Generar PDF</button>
    </div>
  );
};

export default ResumeBuilder;

Siguiente a esto, iremos a la carpeta ‘src’, y abre el fichero App.js e importa ResumeBuilder para luego utilizarlo.

...
import './App.css';
import ResumeBuilder from './ResumeBuilder';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <ResumeBuilder />
      </header>
    </div>
  );
}

Paso 6: Estilización y toques finales

Para mejorar la experiencia del usuario, agreguemos estilos a nuestra aplicación. Siéntete libre de personalizar los estilos a tu gusto utilizando CSS o una biblioteca como Bootstrap. Además, puedes mejorar aún más el documento PDF agregando estilos o información adicional.

Conclusión

¡Y ahí lo tienes! Hemos construido exitosamente un generador de currículums simple utilizando React JS y jspdf. Ahora, los usuarios pueden ingresar su información y, con solo un clic en un botón, generar un currículum en formato PDF. Puedes explorar aún más agregando más características y funcionalidades según tus necesidades. Espero que hayas encontrado útil este tutorial. ¡Gracias por leer y no olvides suscribirte para más tutoriales emocionantes como este! ¡Feliz codificación!