Cómo convertir HTML a PDF en React (Tutorial para desarrolladores)

Convertir HTML a PDF en React se ha convertido en una característica esencial para muchas aplicaciones web. Si está creando un sistema de facturación, un generador de informes o simplemente necesita compartir información en un formato universalmente aceptado, la generación de PDF es crucial. En este artículo, exploraremos cómo crear y dar estilo a archivos PDF en tu aplicación React convirtiendo HTML a PDF usando librerías populares.

Bibliotecas populares para la generación de PDF

Antes de sumergirnos en el proceso de conversión de HTML a PDF, vamos a hablar de algunas librerías populares que puedes utilizar para generar PDF en tus aplicaciones React:

1. React-pdf: Una potente librería para crear documentos PDF en aplicaciones React. Admite varias opciones de estilo y puede crear PDF complejos de varias páginas con facilidad.
2. jsPDF: Una biblioteca JavaScript ampliamente utilizada para generar archivos PDF sobre la marcha. Ofrece una amplia gama de funciones, como el estilo de texto, la incrustación de imágenes y mucho más.
3. html2canvas: Esta librería permite capturar una pantalla de un elemento HTML y convertirla en un objeto canvas, que luego puede convertirse en un PDF utilizando otras librerías como jsPDF.

Requisitos previos para convertir HTML a PDF en React

Familiaridad con React y su ecosistema

Antes de sumergirse en la conversión de HTML a PDF, es crucial tener una sólida comprensión de React. Esto incluye conocimientos de JSX, gestión de estados, ciclos de vida de componentes y hooks.

Conocimientos de HTML, CSS y JavaScript

Una base sólida en HTML, CSS y JavaScript es esencial para trabajar con la biblioteca React-pdf. Esto incluye el conocimiento de elementos y atributos HTML, estilos y selectores CSS y fundamentos de JavaScript como variables, funciones y bucles.

Primeros pasos con una aplicación React

Antes de proceder con la conversión de HTML a PDF en React, vamos a repasar rápidamente cómo crear una nueva aplicación React utilizando la popular herramienta CLI create-react-app. Esto servirá de base para nuestro ejemplo de generación de PDF.

Paso 1 Instalar Node.js

Asegúrese de que tiene Node.js instalado en su máquina. Puede descargar la última versión de Node.js desde la página sitio web oficial.

Paso 2 Instale create-react-app

create-react-app es una herramienta CLI muy utilizada para generar aplicaciones React. Instálelo globalmente utilizando el siguiente comando:

npm install -g create-react-app

Paso 3 Crear una nueva aplicación React

Ahora que tienes create-react-app instalado, puedes crear una nueva aplicación React con el siguiente comando:

create-react-app my-pdf-app

Este comando generará una nueva aplicación React en una carpeta llamada my-pdf-app. Desplázate al directorio recién creado:

cd my-pdf-app

Paso 4 Inicie el servidor de desarrollo

Para iniciar el servidor de desarrollo y ver tu nueva aplicación React en acción, ejecuta el siguiente comando:

npm start

Paso 5 Implementar la generación de PDF

Ahora que ya tienes una aplicación React configurada, puedes seguir los pasos descritos en las secciones anteriores de este artículo para implementar la conversión de HTML a PDF React utilizando librerías populares como React-pdf.

Presentación de la biblioteca React-pdf

React-pdf es una popular biblioteca diseñada específicamente para aplicaciones React, que ofrece una integración perfecta con el ecosistema React. Algunas de sus principales funciones son la compatibilidad con CSS en línea y externo, la generación de PDF multipágina, la estilización avanzada y la compatibilidad con la renderización del lado del servidor. (SSR).

Creación de archivos PDF con React-pdf

En esta sección, nos centraremos en el uso de React-pdf para crear archivos PDF en una aplicación React. Para empezar, tendrás que instalar el paquete React-pdf:

npm install --save @React-pdf/renderer

Una vez instalado, puede crear un nuevo componente React para definir la estructura de su documento PDF:

    import React from "react";
    import {
      Document,
      Page,
      Text,
      View,
      StyleSheet,
      Image,
      Font,
    } from "@React-pdf/renderer";
    const invoiceData = {
      sender: {
        name: "John Doe",
        address: "123 Main Street",
        city: "New York",
        state: "NY",
        zip: "10001",
      },
      recipient: {
        name: "Jane Smith",
        address: "456 Elm Street",
        city: "San Francisco",
        state: "CA",
        zip: "94107",
      },
      items: [
        { description: "Item 1", quantity: 2, unitPrice: 10 },
        { description: "Item 2", quantity: 3, unitPrice: 15 },
        { description: "Item 3", quantity: 1, unitPrice: 20 },
      ],
      invoiceNumber: "INV-123456",
      date: "April 26, 2023",
    };
    const styles = StyleSheet.create({
      page: {
        backgroundColor: "#FFF",
        padding: 30,
      },
      header: {
        fontSize: 24,
        textAlign: "center",
        marginBottom: 30,
      },
      sender: {
        marginBottom: 20,
      },
      recipient: {
        marginBottom: 30,
      },
      addressLine: {
        fontSize: 12,
        marginBottom: 2,
      },
      itemsTable: {
        display: "table",
        width: "100%",
        borderStyle: "solid",
        borderWidth: 1,
        borderRightWidth: 0,
        borderBottomWidth: 0,
      },
      tableRow: {
        margin: "auto",
        flexDirection: "row",
      },
      tableColHeader: {
        width: "25%",
        borderStyle: "solid",
        borderWidth: 1,
        borderLeftWidth: 0,
        borderTopWidth: 0,
        backgroundColor: "#F0F0F0",
      },
      tableCol: {
        width: "25%",
        borderStyle: "solid",
        borderWidth: 1,
        borderLeftWidth: 0,
        borderTopWidth: 0,
      },
      tableCell: {
        fontSize: 12,
        textAlign: "center",
        padding: 5,
      },
      total: {
        marginTop: 20,
        textAlign: "right",
      },
      totalLabel: {
        fontSize: 14,
        fontWeight: "bold",
      },
      totalValue: {
        fontSize: 14,
      },
    });

    const InvoiceDocument = () => {
      const totalAmount = invoiceData.items.reduce(
        (total, item) => total + item.quantity * item.unitPrice,
        0
      );

      return (

            Invoice

              {invoiceData.sender.name}
              {invoiceData.sender.address}

                {invoiceData.sender.city}, {invoiceData.sender.state}{" "}
                {invoiceData.sender.zip}

              {invoiceData.recipient.name}

                {invoiceData.recipient.address}

                {invoiceData.recipient.city}, {invoiceData.recipient.state}{" "}
                {invoiceData.recipient.zip}

                  Description

                  Quantity

                  Unit Price

                  Amount

              {invoiceData.items.map((item, index) => (

                    {item.description}

                    {item.quantity}

                      {item.unitPrice.toFixed(2)}

                      {(item.quantity * item.unitPrice).toFixed(2)}

              ))}

              Total:
              ${totalAmount.toFixed(2)}

      );
    };

    export default InvoiceDocument;

    import React from "react";
    import {
      Document,
      Page,
      Text,
      View,
      StyleSheet,
      Image,
      Font,
    } from "@React-pdf/renderer";
    const invoiceData = {
      sender: {
        name: "John Doe",
        address: "123 Main Street",
        city: "New York",
        state: "NY",
        zip: "10001",
      },
      recipient: {
        name: "Jane Smith",
        address: "456 Elm Street",
        city: "San Francisco",
        state: "CA",
        zip: "94107",
      },
      items: [
        { description: "Item 1", quantity: 2, unitPrice: 10 },
        { description: "Item 2", quantity: 3, unitPrice: 15 },
        { description: "Item 3", quantity: 1, unitPrice: 20 },
      ],
      invoiceNumber: "INV-123456",
      date: "April 26, 2023",
    };
    const styles = StyleSheet.create({
      page: {
        backgroundColor: "#FFF",
        padding: 30,
      },
      header: {
        fontSize: 24,
        textAlign: "center",
        marginBottom: 30,
      },
      sender: {
        marginBottom: 20,
      },
      recipient: {
        marginBottom: 30,
      },
      addressLine: {
        fontSize: 12,
        marginBottom: 2,
      },
      itemsTable: {
        display: "table",
        width: "100%",
        borderStyle: "solid",
        borderWidth: 1,
        borderRightWidth: 0,
        borderBottomWidth: 0,
      },
      tableRow: {
        margin: "auto",
        flexDirection: "row",
      },
      tableColHeader: {
        width: "25%",
        borderStyle: "solid",
        borderWidth: 1,
        borderLeftWidth: 0,
        borderTopWidth: 0,
        backgroundColor: "#F0F0F0",
      },
      tableCol: {
        width: "25%",
        borderStyle: "solid",
        borderWidth: 1,
        borderLeftWidth: 0,
        borderTopWidth: 0,
      },
      tableCell: {
        fontSize: 12,
        textAlign: "center",
        padding: 5,
      },
      total: {
        marginTop: 20,
        textAlign: "right",
      },
      totalLabel: {
        fontSize: 14,
        fontWeight: "bold",
      },
      totalValue: {
        fontSize: 14,
      },
    });

    const InvoiceDocument = () => {
      const totalAmount = invoiceData.items.reduce(
        (total, item) => total + item.quantity * item.unitPrice,
        0
      );

      return (

            Invoice

              {invoiceData.sender.name}
              {invoiceData.sender.address}

                {invoiceData.sender.city}, {invoiceData.sender.state}{" "}
                {invoiceData.sender.zip}

              {invoiceData.recipient.name}

                {invoiceData.recipient.address}

                {invoiceData.recipient.city}, {invoiceData.recipient.state}{" "}
                {invoiceData.recipient.zip}

                  Description

                  Quantity

                  Unit Price

                  Amount

              {invoiceData.items.map((item, index) => (

                    {item.description}

                    {item.quantity}

                      {item.unitPrice.toFixed(2)}

                      {(item.quantity * item.unitPrice).toFixed(2)}

              ))}

              Total:
              ${totalAmount.toFixed(2)}

      );
    };

    export default InvoiceDocument;

Ahora, puede utilizar el componente PDFDownloadLink de React-pdf para descargar el archivo PDF generado:

    import React from 'react';
    import { PDFDownloadLink } from '@React-pdf/renderer';
    import InvoiceDocument from './InvoiceDocument';
    import './App.css';

    const App = () => (

          {({ blob, url, loading, error }) =>
            loading ? 'Loading document...' : 'Download Invoice'
          }

    );

    export default App;

    import React from 'react';
    import { PDFDownloadLink } from '@React-pdf/renderer';
    import InvoiceDocument from './InvoiceDocument';
    import './App.css';

    const App = () => (

          {({ blob, url, loading, error }) =>
            loading ? 'Loading document...' : 'Download Invoice'
          }

    );

    export default App;

Ahora agregue algunos estilos CSS en App.css para una interfaz de usuario personalizada:

    .app-container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #d1e8ff;
    }

    .download-button {
      display: inline-block;
      background-color: #5a8fd5;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      padding: 12px 24px;
      border-radius: 4px;
      text-decoration: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .download-button:hover {
      background-color: #3a68b7;
    } 

Abra localhost:3000 en su navegador.

Al hacer clic en el botón Descargar, se descargará el archivo PDF.

Este es el resultado del archivo PDF a partir de un documento HTML:

Estilizar sus archivos PDF

La biblioteca React-pdf admite una amplia gama de opciones de estilo, similares a CSS. Estas son algunas propiedades de estilo comunes que puede utilizar para personalizar el aspecto de sus archivos PDF:

• **Color Establece el color del texto.
• **Tamaño de letra Establece el tamaño de la fuente del texto.
• fontFamily: Establece la familia de fuentes del texto.
• **Alineación del texto Establece la alineación del texto (por ejemplo, "izquierda", "derecha", "centro" o "justificar".).
• **Margen Establece el margen alrededor de un elemento.
• Relleno: Establece el relleno dentro de un elemento.
• **Borde Establece el borde alrededor de un elemento.
• **Color de fondo Establece el color de fondo de un elemento.

Librería PDF alternativa para desarrolladores React

IronPDF for Node.js es una excelente alternativa para convertir HTML a PDF en react. Desarrollada por IronSoftware, es una potente biblioteca que permite a los desarrolladores generar y manipular documentos PDF directamente desde sus aplicaciones Node.js. Una de las características más destacadas de IronPDF es su capacidad para gestionar la ejecución de JavaScript dentro del contenido HTML durante la generación de PDF, lo que permite la creación de PDF dinámicos e interactivos.

Con soporte para varias plataformas, incluyendo Windows, MacOS, Linux, Docker y plataformas en la nube como Azure y AWS, IronPDF garantiza la compatibilidad entre plataformas. Su sencilla API permite a los desarrolladores integrar rápidamente la generación y manipulación de PDF en sus proyectos Node.js.

React es una biblioteca JavaScript para construir interfaces de usuario, y como IronPDF está construido para Node.js, puede integrar IronPDF en sus aplicaciones React utilizando su API Node.js.

Aquí tienes un resumen de cómo puedes usar IronPDF con React:

1. Instala IronPDF: Puedes instalar IronPDF en tu proyecto React usando npm o yarn.

  npm install @ironsoftware/ironpdf

2. Integración con componentes React: Puedes crear componentes React que utilicen IronPDF para generar y manipular PDFs. Por ejemplo, puede tener un componente que tome contenido HTML como entrada y lo convierta en un PDF utilizando la API de IronPDF.

  import React from 'react';
  import { PdfDocument } from '@ironsoftware/ironpdf';

  const HTMLToPDFComponent = () => {
      const convertHTMLToPDF = async (htmlContent) => {
          try {
              const pdf = await PdfDocument.fromHtml(htmlContent);
              await pdf.saveAs('generated_pdf.pdf');
              alert('PDF generated successfully!');
          } catch (error) {
              console.error('Error generating PDF:', error);
          }
      };

      return (
          <div>
              {/* Input HTML content */}
              <textarea onChange={(e) => convertHTMLToPDF(e.target.value)} />
          </div>
      );
  };

  export default HTMLToPDFComponent;

  import React from 'react';
  import { PdfDocument } from '@ironsoftware/ironpdf';

  const HTMLToPDFComponent = () => {
      const convertHTMLToPDF = async (htmlContent) => {
          try {
              const pdf = await PdfDocument.fromHtml(htmlContent);
              await pdf.saveAs('generated_pdf.pdf');
              alert('PDF generated successfully!');
          } catch (error) {
              console.error('Error generating PDF:', error);
          }
      };

      return (
          <div>
              {/* Input HTML content */}
              <textarea onChange={(e) => convertHTMLToPDF(e.target.value)} />
          </div>
      );
  };

  export default HTMLToPDFComponent;

3. Maneje la generación de PDF: Utilice la funcionalidad de IronPDF dentro de sus componentes React para gestionar la generación, manipulación y guardado de PDF. Puede utilizar los métodos de IronPDF para convertir Cadenas HTML, URL o imágenes a PDF.
4. Renderizar PDFs: Una vez que hayas generado PDFs usando IronPDF, puedes renderizarlos dentro de tu aplicación React usando componentes o librerías apropiadas para mostrar documentos PDF.

  import React from 'react';

  const PDFViewerComponent = () => {
      return (
          <div>
              {/* Render PDF using appropriate component or library */}
              <iframe src="generated_pdf.pdf" width="100%" height="600px" title="PDF Viewer" />
          </div>
      );
  };

  export default PDFViewerComponent;

  import React from 'react';

  const PDFViewerComponent = () => {
      return (
          <div>
              {/* Render PDF using appropriate component or library */}
              <iframe src="generated_pdf.pdf" width="100%" height="600px" title="PDF Viewer" />
          </div>
      );
  };

  export default PDFViewerComponent;

Con IronPDF, los desarrolladores pueden generar eficazmente documentos PDF de calidad profesional a partir de diversas fuentes, personalizarlos para que cumplan sus requisitos específicos e integrar perfectamente las funciones de generación de PDF en sus aplicaciones .NET. IronPDF también es compatible con funciones avanzadas como CSS, JavaScript y fuentes personalizadas, lo que garantiza que los archivos PDF generados coincidirán con el diseño y los requisitos de su aplicación.

Conclusión

En este artículo, hemos cubierto el proceso de convertir HTML a PDF en React usando la librería React-pdf. Hablamos de librerías populares para generación de PDF, de cómo crear y dar estilo a archivos PDF utilizando React-pdf, y de opciones adicionales para generar documentos PDF más complejos.

Siguiendo esta guía, ahora debería tener una comprensión sólida de cómo generar archivos PDF en sus aplicaciones React, lo que le permite generar PDF de alta calidad y satisfacer las necesidades de diversos casos de uso.

IronPDF ofrece un prueba gratuita que le permite probar la biblioteca y determinar si satisface sus necesidades antes de comprometerse a comprarla. Tras el periodo de prueba, IronPDF licencias a partir de $749, que incluye asistencia y actualizaciones prioritarias. Además, también está disponible para otros idiomas como C# .NET, Java y Python. Descargue la biblioteca de aquí y pruébalo.