HERRAMIENTAS PDF

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

Regan Pun

16 de mayo, 2023

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.

Cómo convertir HTML a PDF en React

Crear y configurar un proyecto React
Descargar la biblioteca para convertir HTML a PDF en React usando npm
Importa los módulos necesarios de React-pdf/renderer
Configurar la página HTML con los módulos importados
Utilice el módulo PDFDownloadLink de React-pdf para convertir el HTML a PDF

Bibliotecas populares para la generación de PDF

Antes de sumergirnos en el proceso de convertir HTML a PDF, hablemos de algunas bibliotecas populares que puedes usar para la generación de PDF en tus aplicaciones React:

React-pdf: Una biblioteca poderosa para crear documentos PDF en aplicaciones React. Admite varias opciones de estilo y puede crear PDF complejos de varias páginas con facilidad.
jsPDF: Una biblioteca de JavaScript ampliamente utilizada para generar archivos PDF al instante. Ofrece una amplia gama de funciones, como el estilo de texto, la incrustación de imágenes y mucho más.
html2canvas: Esta biblioteca te permite capturar una captura de pantalla de un elemento HTML y convertirlo en un objeto canvas, el cual luego puede ser convertido a PDF usando otras bibliotecas 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, repasemos rápidamente cómo crear una nueva aplicación de 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úrate de tener Node.js instalado en tu máquina. Puedes descargar la última versión de Node.js desde el sitio web oficial de Node.js.

Paso 2 Instale create-react-app

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

npm install -g create-react-app

Cómo convertir HTML a PDF en React (Tutorial para desarrolladores): Figura 1 - Crear aplicación react

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

Cómo convertir HTML a PDF en React (Tutorial para desarrolladores): Figura 2 - Creando una nueva aplicación de React

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

Cómo convertir HTML a PDF en React (Tutorial para Desarrolladores): Figura 3 - Aplicación React en vivo ejecutándose en localhost

Paso 5 Implementar la generación de PDF

Ahora que tienes una aplicación de 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 bibliotecas 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 características clave incluyen soporte para CSS en línea y externo, generación de PDF de varias páginas, estilo avanzado y compatibilidad con la representación del lado del servidor (SSR).

Creación de archivos PDF con React-pdf

En esta sección, nos enfocaremos en usar React-pdf para crear archivos PDF en una aplicación React. Para comenzar, necesitarás instalar el paquete React-pdf:

npm install --save @React-pdf/renderer

Cómo convertir HTML a PDF en React (Tutorial para desarrolladores): Figura 4 - Paquete react-pdf

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;

JAVASCRIPT

Ahora, puedes usar 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;

JAVASCRIPT

Ahora añade 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;
    }

Abre localhost:3000 en tu navegador.

Cómo Convertir HTML a PDF en React (Tutorial para Desarrolladores): Figura 5 - React PDF ejecutándose en localhost

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

Cómo convertir HTML a PDF en React (Tutorial para desarrolladores): Figura 6 - Factura descargada

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

Cómo Convertir HTML a PDF en React (Tutorial para Desarrolladores): Figura 7 - Salida del Documento

Estilizar sus archivos PDF

La biblioteca React-pdf admite una amplia gama de opciones de estilo, similar al 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.
fontSize: Establece el tamaño de la fuente del texto.
fontFamily: Establece la familia de fuentes del texto.
textAlign: Establece la alineación del texto (p. ej., 'izquierda', 'derecha', 'centrado' o 'justificar').
margin: Establece el margen alrededor de un elemento.
padding: Establece el relleno dentro de un elemento.
border: Establece el borde alrededor de un elemento.
backgroundColor: 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. Desarrollado por Iron Software, 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:

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

  npm install @ironsoftware/ironpdf

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;

JAVASCRIPT

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. Puedes utilizar los métodos de IronPDF para convertir cadenas HTML, URLs o imágenes a PDFs.
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;

JAVASCRIPT

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 biblioteca React-pdf. Hablamos sobre bibliotecas populares para la generación de PDF, cómo crear y dar estilo a archivos PDF usando React-pdf, y 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 una versión de prueba gratuita, que te permite probar la biblioteca y determinar si satisface tus necesidades antes de comprometerte a realizar una compra. Después del período de prueba, las licencias de compra de IronPDF comienzan desde $749, e incluyen soporte prioritario y actualizaciones. Además, IronPDF está disponible para otros lenguajes como C# .NET, Java y Python. Descargue la biblioteca IronPDF comenzando con IronPDF for Node.js y pruébelo.

Regan Pun

Chatea con el equipo de ingeniería ahora

Ingeniero de software

Regan se licenció en Ingeniería Electrónica por la Universidad de Reading. Antes de incorporarse a Iron Software, sus anteriores puestos de trabajo le obligaban a centrarse en tareas concretas; lo que más le gusta de Iron Software es la variedad de tareas que puede realizar, ya sea añadiendo valor a las ventas, el soporte técnico, el desarrollo de productos o el marketing. Le gusta entender cómo utilizan los desarrolladores la biblioteca de Iron Software y utilizar ese conocimiento para mejorar continuamente la documentación y desarrollar los productos.

< ANTERIOR
Cómo imprimir un archivo PDF en JavaScript