1. IronPDF
  2. Blog de IronPDF
  3. Herramientas Node PDF
  4. Generador de PDF React
HERRAMIENTAS PDF

Cómo crear un archivo PDF en React

Darrius Serrant
Darrius Serrant
24 de agosto, 2023
Compartir:

¡Bienvenido al tutorial sobre la creación de documentos PDF desde una aplicación React! En este tutorial, exploraremos varias librerías para generar PDFs y aprenderemos a usar la popular librería jsPDF para crear archivos PDF directamente desde tus componentes React. ¡Así que vamos a sumergirnos y comenzar!

PDF (Formato de Documento Portátil) es un formato de archivo ampliamente utilizado para compartir e imprimir documentos conservando su diseño y formato. Como desarrollador web React, es posible que te encuentres con escenarios en los que necesites generar documentos PDF, como facturas, informes o contratos de venta, directamente desde tu aplicación React.

Elegir una biblioteca PDF de React

Crear documentos PDF en una aplicación React puede ser una tarea desalentadora, especialmente si eres nuevo en el panorama. Por suerte, tenemos a nuestra disposición varias bibliotecas de terceros que simplifican considerablemente este proceso. Cada biblioteca tiene sus propias funciones y utilidades, que se adaptan a distintos casos de uso. Exploremos estas bibliotecas con un poco más de detalle.

jsPDF

jsPDF es una biblioteca muy popular entre los desarrolladores para generar archivos PDF desde JavaScript. Uno de sus principales argumentos de venta es su sencillez. Su sintaxis y uso son bastante sencillos, lo que le permitirá transformar su contenido HTML en un archivo PDF en un abrir y cerrar de ojos.

Le permite controlar el formato y el diseño de sus PDF, desde cambiar el tamaño y el color de la fuente hasta ajustar la orientación y el tamaño de la página. jsPDF es una solución robusta que funciona tanto en entornos de navegador como de servidor, lo que la convierte en una opción excelente para una amplia gama de aplicaciones JavaScript.

pdfmake

pdfmake destaca por ser una solución de impresión PDF cliente/servidor en JavaScript puro. Esta biblioteca es una opción excelente para crear PDF más complejos, gracias a su completa API y a sus flexibles opciones de diseño. Con pdfmake, puede definir el contenido y la estructura de su documento mediante un simple objeto JavaScript y, a continuación, transformarlo en un documento PDF válido.

React-PDF

React-PDF es una biblioteca única que proporciona una potente funcionalidad para crear archivos PDF utilizando componentes React. En lugar de escribir manualmente la estructura de tu documento en un objeto JavaScript, puedes crear tu PDF de la misma forma que construirías una aplicación React típica - usando componentes reutilizables y props. El sitio web de IronPDF tiene un tutorial sobre la creación de PDFs usando la biblioteca React-PDF.

¿Por qué elegir jsPDF?

Aunque las tres librerías proporcionan potentes herramientas para generar documentos PDF en React, utilizaremos jsPDF en este tutorial debido a su simplicidad, flexibilidad y amplia adopción en la comunidad. Supone una barrera de entrada más baja para los principiantes, y su sólido conjunto de funciones lo convierte en una opción adecuada para muchos casos de uso. Los principios que exploraremos con jsPDF te darán una base sólida para generar PDFs, y podrás coger otras librerías más fácilmente si tu proyecto lo requiere.

Requisitos previos

Antes de sumergirnos en este tutorial, es esencial que te asegures de que cuentas con las herramientas y los conocimientos necesarios para seguirlo sin problemas. Los requisitos previos para este tutorial son los siguientes:

Conocimientos básicos de React

En primer lugar, debes tener conocimientos básicos de React, una popular biblioteca de JavaScript para crear interfaces de usuario, especialmente aplicaciones de una sola página. Debe estar familiarizado con conceptos como JSX (JavaScript XML), componentes, estado y props en React.

Entorno de desarrollo

También deberías tener un entorno de desarrollo configurado en tu ordenador para crear aplicaciones React. Esto incluye un editor de texto o un Entorno de Desarrollo Integrado (IDE). Editores de texto como Visual Studio Code, Atom o Sublime Text son buenas opciones.

Node.js y npm

Para gestionar nuestro proyecto y sus dependencias, utilizaremos Node.js y npm (Node Package Manager). Asegúrese de que tiene Node.js instalado en su ordenador. Node.js es un tiempo de ejecución de JavaScript que nos permite ejecutar JavaScript en nuestros servidores. Viene con npm instalado, para que puedas gestionar las librerías necesarias para tu proyecto.

Puedes comprobar si Node.js y npm están instalados ejecutando los siguientes comandos de terminal:

node -v
npm -v

Estos comandos mostrarán la versión de Node.js y npm instalada en tu sistema, respectivamente. Si no los tienes instalados o si tus versiones están desactualizadas, deberías descargar e instalar la versión más reciente de Soporte a Largo Plazo (LTS) de Node.js desde su página oficial de descargas.

Paso 1: Configurar el proyecto

Empecemos por configurar nuestro proyecto React. Abra su terminal y navegue hasta el directorio deseado donde desea crear su proyecto. Ejecute el siguiente comando para crear una nueva aplicación React:

npx create-react-app pdf-from-react

Cómo crear un archivo PDF en React: Figura 1 - Una captura de pantalla del terminal mostrando el comando anterior en progreso.

Este comando creará un nuevo directorio llamado pdf-from-react con una estructura básica de proyecto React.

A continuación, navegue hasta el directorio del proyecto:

cd pdf-from-react

Ahora, podemos abrir el proyecto en nuestro editor de código y proceder con la implementación.

Paso 2: Añadir las dependencias necesarias

En primer lugar, debemos instalar los paquetes necesarios. Instala react, react-dom, @mui/material y jspdf utilizando el siguiente comando de terminal.

npm install jspdf @mui/material @emotion/react @emotion/styled @mui/icons-material

Paso 3: Creación de la función de generación de PDF

Importar bibliotecas

Comenzamos importando las dependencias necesarias para nuestra aplicación. Estos incluyen varios componentes de la biblioteca Material-UI, la biblioteca jsPDF para generar PDFs y utilidades de estilo.

import React, { useState } from "react";
import "./App.css";
import {
  Button,
  TextField,
  Box,
  Container,
  Typography,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  IconButton,
  Snackbar,
  Alert,
} from "@mui/material";
import Grid from "@mui/material/Grid";
import DeleteIcon from "@mui/icons-material/Delete";
import jsPDF from "jspdf";
import { styled } from "@mui/material/styles";
import { tableCellClasses } from "@mui/material/TableCell";
JAVASCRIPT

Creación de componentes con estilo

Para agregar un comportamiento coherente entre navegadores a nuestra aplicación, hemos utilizado la utilidad styled de la biblioteca MUI para crear StyledTableCell y StyledTableRow.

const StyledTableCell = styled(TableCell)(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  [`&.${tableCellClasses.body}`]: {
    fontSize: 14,
  },
}));

const StyledTableRow = styled(TableRow)(({ theme }) => ({
  "&:nth-of-type(odd)": {
    backgroundColor: theme.palette.action.hover,
  },
  "&:last-child td, &:last-child th": {
    border: 0,
  },
}));
JAVASCRIPT

Creación del componente de la aplicación

El componente principal de nuestra aplicación es el componente App. Tenemos cuatro variables de estado: customerName y customerAddress para realizar un seguimiento de los datos del cliente, items para llevar un registro de la lista de artículos en la factura, y error para mostrar un mensaje de error cuando sea necesario.

function App() {
  // State variables
  const [customerName, setCustomerName] = useState("");
  const [customerAddress, setCustomerAddress] = useState("");
  const [items, setItems] = useState([{ name: "", quantity: "", price: "" }]);
  const [error, setError] = useState(false);
JAVASCRIPT

Tratamiento de las entradas del usuario

En este bloque de código, hemos definido funciones para gestionar las interacciones del usuario: cambiar los detalles del artículo, añadir un nuevo artículo y eliminar un artículo. La función handleItemChange actualiza las propiedades de un elemento cuando un usuario las modifica. La función addItem añade un nuevo elemento a la lista. La función deleteItem elimina un elemento de la lista.

const handleItemChange = (index, event) => {
  let newItems = [...items];
  newItems[index][event.target.name] = event.target.value;
  setItems(newItems);
};

const addItem = () => {
  setItems([...items, { name: "", quantity: "", price: "" }]);
};

const deleteItem = (index) => {
  let newItems = [...items];
  newItems.splice(index, 1);
  setItems(newItems);
};
JAVASCRIPT

Generar la factura

Lo siguiente es el código de la función generateInvoice:

// Generate invoice
const generateInvoice = () => {
  // Validate the input fields
  if (
    !customerName 

    !customerAddress 

    items.some((item) => !item.name 
 !item.quantity 
 !item.price)
  ) {
    setError(true);
    return;
  }

  // Create a new jsPDF instance
  let doc = new jsPDF("p", "pt");

  // Add invoice header
  doc.setFontSize(24);
  doc.text("Invoice", 40, 60);
  doc.setFontSize(10);
  doc.text("Invoice Number: 123456", 40, 90);
  doc.text("Date: " + new Date().toDateString(), 40, 110);
  doc.text(`Customer Name: ${customerName}`, 40, 130);
  doc.text(`Customer Address: ${customerAddress}`, 40, 150);

  // Add items section
  doc.setFontSize(14);
  doc.text("Items:", 40, 200);
  doc.line(40, 210, 550, 210);

  // Add item details
  doc.setFontSize(12);
  let yOffset = 240;
  let total = 0;

  items.forEach((item) => {
    let itemTotal = item.quantity * item.price;
    total += itemTotal;

    doc.text(`Item: ${item.name}`, 40, yOffset);
    doc.text(`Quantity: ${item.quantity}`, 200, yOffset);
    doc.text(`Price: $${item.price}`, 300, yOffset);
    doc.text(`Total: $${itemTotal}`, 400, yOffset);

    yOffset += 20;
  });

  // Add total
  doc.line(40, yOffset, 550, yOffset);
  doc.setFontSize(14);
  doc.text(`Total: $${total}`, 400, yOffset + 30);

  // Save the generated PDF as "invoice.pdf"
  doc.save("invoice.pdf");

  // Reset error state
  setError(false);
};
JAVASCRIPT

En la función generateInvoice, primero realizamos la validación en los campos de entrada para asegurarnos de que el nombre del cliente, la dirección del cliente y los detalles del artículo estén completados. Si alguno de estos campos está vacío, establecemos el estado error en true y retornamos de inmediato.

A continuación, creamos una nueva instancia de jsPDF llamando a new jsPDF("p", "pt"). El primer argumento "p" especifica la orientación de la página como vertical, y el segundo argumento "pt" especifica la unidad de medida como puntos.

A continuación, empezamos a añadir el contenido a nuestro documento PDF. Establecemos el tamaño de la fuente usando doc.setFontSize y usamos el método doc.text para agregar texto en coordenadas específicas en la página. Añadimos la cabecera de la factura, incluyendo el título, el número de factura, la fecha, el nombre y la dirección del cliente.

Después del encabezado, añadimos la sección "Items" configurando el tamaño de fuente y agregando una línea usando doc.line para separar los elementos del encabezado. A continuación, iteramos sobre cada elemento en el array items y calculamos el precio total de cada elemento multiplicando la cantidad por el precio. Actualizamos la variable total con la suma de todos los totales de los elementos.

Para cada artículo, usamos doc.text para agregar el nombre del artículo, la cantidad, el precio y el total del artículo al documento PDF. Incrementamos la variable yOffset para movernos a la siguiente línea para cada elemento. Finalmente, añadimos una línea para separar los artículos del total y usamos doc.text para añadir el monto total en la parte inferior derecha del documento.

Una vez que se ha añadido el contenido, utilizamos doc.save("invoice.pdf") para guardar el PDF generado como "invoice.pdf" en la computadora del usuario. Finalmente, restablecemos el estado de error a false para eliminar cualquier error de validación previo.

Paso 4: Renderizar la interfaz de usuario

La declaración return contiene el código JSX que maneja el proceso de renderización. Incluye campos de entrada para el nombre y la dirección del cliente, una tabla para introducir los detalles de los artículos, botones para añadir artículos y generar la factura, y una barra de error para mostrar los errores de validación.

Utiliza componentes de la biblioteca Material-UI, como Button, TextField, Box, Container, Typography, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, IconButton, Snackbar y Alert, para crear componentes básicos. Estos componentes se utilizan para crear los campos del formulario, las tablas, los botones y las notificaciones de error.

return (
  <Container maxWidth="md">
    <Box sx={{ my: 4 }}>
      <Typography variant="h3" component="h1" gutterBottom>
        Create Invoice
      </Typography>

      {/* Customer Name and Address fields */}
      <Grid container spacing={3}>
        <Grid item xs={6}>
          <TextField
            label="Customer Name"
            fullWidth
            margin="normal"
            value={customerName}
            onChange={(e) => setCustomerName(e.target.value)}
          />
        </Grid>
        <Grid item xs={6}>
          <TextField
            label="Customer Address"
            fullWidth
            margin="normal"
            value={customerAddress}
            onChange={(e) => setCustomerAddress(e.target.value)}
          />
        </Grid>
      </Grid>

      {/* Items table */}
      <TableContainer component={Paper}>
        <Table sx={{ minWidth: 700 }} aria-label="invoice table">
          <TableHead>
            <TableRow>
              <StyledTableCell>Item Name</StyledTableCell>
              <StyledTableCell align="left">Quantity</StyledTableCell>
              <StyledTableCell align="left">Price</StyledTableCell>
              <StyledTableCell align="left">Action</StyledTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {items.map((item, index) => (
              <StyledTableRow key={index}>
                <StyledTableCell component="th" scope="row">
                  <TextField
                    fullWidth
                    value={item.name}
                    onChange={(event) => handleItemChange(index, event)}
                    name="name"
                  />
                </StyledTableCell>
                <StyledTableCell align="right">
                  <TextField
                    fullWidth
                    value={item.quantity}
                    onChange={(event) => handleItemChange(index, event)}
                    name="quantity"
                  />
                </StyledTableCell>
                <StyledTableCell align="right">
                  <TextField
                    fullWidth
                    value={item.price}
                    onChange={(event) => handleItemChange(index, event)}
                    name="price"
                  />
                </StyledTableCell>
                <StyledTableCell align="right">
                  <IconButton onClick={() => deleteItem(index)}>
                    <DeleteIcon />
                  </IconButton>
                </StyledTableCell>
              </StyledTableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>

      {/* Buttons */}
      <Box mt={2} display="flex" gap={2}>
        <Button variant="contained" onClick={addItem}>
          Add Item
        </Button>
        <Button variant="outlined" color="success" onClick={generateInvoice}>
          Generate Invoice
        </Button>
      </Box>
    </Box>

    {/* Error Snackbar */}
    <Snackbar
      open={error}
      autoHideDuration={6000}
      onClose={() => setError(false)}
      anchorOrigin={{ vertical: "top", horizontal: "right" }}
    >
      <Alert onClose={() => setError(false)} severity="error">
        Please fill in all required fields.
      </Alert>
    </Snackbar>
  </Container>
);
JAVASCRIPT

Código App.js y App.css completo

Aquí está el código App.js completo que puedes copiar y pegar en tu proyecto:

import React, { useState } from "react";
import "./App.css";
import {
  Button,
  TextField,
  Box,
  Container,
  Typography,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  IconButton,
  Snackbar,
  Alert,
} from "@mui/material";
import Grid from "@mui/material/Grid";
import DeleteIcon from "@mui/icons-material/Delete";
import jsPDF from "jspdf";
import { styled } from "@mui/material/styles";
import { tableCellClasses } from "@mui/material/TableCell";

const StyledTableCell = styled(TableCell)(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  [`&.${tableCellClasses.body}`]: {
    fontSize: 14,
  },
}));

const StyledTableRow = styled(TableRow)(({ theme }) => ({
  "&:nth-of-type(odd)": {
    backgroundColor: theme.palette.action.hover,
  },
  "&:last-child td, &:last-child th": {
    border: 0,
  },
}));

function App() {
  // State variables
  const [customerName, setCustomerName] = useState("");
  const [customerAddress, setCustomerAddress] = useState("");
  const [items, setItems] = useState([{ name: "", quantity: "", price: "" }]);
  const [error, setError] = useState(false);

  // Event handler for item changes
  const handleItemChange = (index, event) => {
    let newItems = [...items];
    newItems[index][event.target.name] = event.target.value;
    setItems(newItems);
  };

  // Add new item to the list
  const addItem = () => {
    setItems([...items, { name: "", quantity: "", price: "" }]);
  };

  // Delete an item from the list
  const deleteItem = (index) => {
    let newItems = [...items];
    newItems.splice(index, 1);
    setItems(newItems);
  };

  // Generate invoice
  const generateInvoice = () => {
    // Validate the input fields
    if (
      !customerName 

      !customerAddress 

      items.some((item) => !item.name 
 !item.quantity 
 !item.price)
    ) {
      setError(true);
      return;
    }

    // Create a new jsPDF instance
    let doc = new jsPDF("p", "pt");

    // Add invoice header
    doc.setFontSize(24);
    doc.text("Invoice", 40, 60);
    doc.setFontSize(10);
    doc.text("Invoice Number: 123456", 40, 90);
    doc.text("Date: " + new Date().toDateString(), 40, 110);
    doc.text(`Customer Name: ${customerName}`, 40, 130);
    doc.text(`Customer Address: ${customerAddress}`, 40, 150);

    // Add items section
    doc.setFontSize(14);
    doc.text("Items:", 40, 200);
    doc.line(40, 210, 550, 210);

    // Add item details
    doc.setFontSize(12);
    let yOffset = 240;
    let total = 0;

    items.forEach((item) => {
      let itemTotal = item.quantity * item.price;
      total += itemTotal;

      doc.text(`Item: ${item.name}`, 40, yOffset);
      doc.text(`Quantity: ${item.quantity}`, 200, yOffset);
      doc.text(`Price: $${item.price}`, 300, yOffset);
      doc.text(`Total: $${itemTotal}`, 400, yOffset);

      yOffset += 20;
    });

    // Add total
    doc.line(40, yOffset, 550, yOffset);
    doc.setFontSize(14);
    doc.text(`Total: $${total}`, 400, yOffset + 30);

    // Save the generated PDF as "invoice.pdf"
    doc.save("invoice.pdf");

    // Reset error state
    setError(false);
  };

  return (
    <Container maxWidth="md">
      <Box sx={{ my: 4 }}>
        <Typography variant="h3" component="h1" gutterBottom>
          Create Invoice
        </Typography>

        {/* Customer Name and Address fields */}
        <Grid container spacing={3}>
          <Grid item xs={6}>
            <TextField
              label="Customer Name"
              fullWidth
              margin="normal"
              value={customerName}
              onChange={(e) => setCustomerName(e.target.value)}
            />
          </Grid>
          <Grid item xs={6}>
            <TextField
              label="Customer Address"
              fullWidth
              margin="normal"
              value={customerAddress}
              onChange={(e) => setCustomerAddress(e.target.value)}
            />
          </Grid>
        </Grid>

        {/* Items table */}
        <TableContainer component={Paper}>
          <Table sx={{ minWidth: 700 }} aria-label="invoice table">
            <TableHead>
              <TableRow>
                <StyledTableCell>Item Name</StyledTableCell>
                <StyledTableCell align="left">Quantity</StyledTableCell>
                <StyledTableCell align="left">Price</StyledTableCell>
                <StyledTableCell align="left">Action</StyledTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {items.map((item, index) => (
                <StyledTableRow key={index}>
                  <StyledTableCell component="th" scope="row">
                    <TextField
                      fullWidth
                      value={item.name}
                      onChange={(event) => handleItemChange(index, event)}
                      name="name"
                    />
                  </StyledTableCell>
                  <StyledTableCell align="right">
                    <TextField
                      fullWidth
                      value={item.quantity}
                      onChange={(event) => handleItemChange(index, event)}
                      name="quantity"
                    />
                  </StyledTableCell>
                  <StyledTableCell align="right">
                    <TextField
                      fullWidth
                      value={item.price}
                      onChange={(event) => handleItemChange(index, event)}
                      name="price"
                    />
                  </StyledTableCell>
                  <StyledTableCell align="right">
                    <IconButton onClick={() => deleteItem(index)}>
                      <DeleteIcon />
                    </IconButton>
                  </StyledTableCell>
                </StyledTableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>

        {/* Buttons */}
        <Box mt={2} display="flex" gap={2}>
          <Button variant="contained" onClick={addItem}>
            Add Item
          </Button>
          <Button variant="outlined" color="success" onClick={generateInvoice}>
            Generate Invoice
          </Button>
        </Box>
      </Box>

      {/* Error Snackbar */}
      <Snackbar
        open={error}
        autoHideDuration={6000}
        onClose={() => setError(false)}
        anchorOrigin={{ vertical: "top", horizontal: "right" }}
      >
        <Alert onClose={() => setError(false)} severity="error">
          Please fill in all required fields.
        </Alert>
      </Snackbar>
    </Container>
  );
}
export default App;
JAVASCRIPT

Aquí está el código de App.css:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  /* This is the weight for bold in Poppins */
  color: #FF6347;
  /* This is the color Tomato. Replace with your preferred color */
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #E9F8F4;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Paso 5: Probar la aplicación

Para probar la función de generación de PDF, ejecute el siguiente comando en el terminal:

npm start

Esto iniciará el servidor de desarrollo, y puedes ver la aplicación en tu navegador en http://localhost:3000.

Cómo crear un archivo PDF en React - Figura 2: La aplicación de factura completada con los campos predeterminados, no rellenados.

Introduzca el nombre del cliente, la dirección y los datos del artículo en los campos de entrada y pulse el botón "Generar factura". El archivo PDF se descargará en su ordenador y podrá abrirlo para ver la vista de página completa de la factura generada.

Cómo Crear Un Archivo PDF en React - Figura 3: La aplicación con tres elementos de línea completados, con artículos, cantidades y precios variables.

Cuando haga clic en el botón "Generar factura", se generará el archivo PDF.

Cómo crear un archivo PDF en React - Figura 4: El PDF generado.

Si intenta generar un PDF con algún campo vacío, aparecerá un mensaje de error en la esquina superior derecha.

Cómo crear un archivo PDF en React - Figura 5: Se muestra un mensaje de error ya que no se han completado todos los campos.

IronPDF - La biblioteca PDF de Node.js

IronPDF for Node.js es una biblioteca PDF para Node.js completa que destaca en precisión, facilidad de uso y velocidad. Ofrece una amplia gama de funciones para generar, editar y dar formato a PDF directamente desde HTML, URL e imágenes en React. 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.

Entre las características más destacadas de IronPDF for Node.js se incluyen: representación perfecta de píxeles, amplias opciones de formato y funciones de edición avanzadas como combinar y dividir PDF, añadir anotaciones y crear formularios PDF.

Aquí hay un ejemplo de generación de un documento PDF a partir de un Archivo HTML, Cadena HTML y URL:

import { PdfDocument } from "@ironsoftware/ironpdf";

(async () => {
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    await pdfFromUrl.saveAs("website.pdf");

    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    await pdfFromHtmlFile.saveAs("markup.pdf");

    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();
JAVASCRIPT

Para más ejemplos de código sobre tareas relacionadas con PDF, por favor visite esta página de ejemplos de código de IronPDF.

Conclusión

En conclusión, crear PDFs en una aplicación React no tiene por qué ser intimidante. Con las herramientas adecuadas y unos conocimientos claros, podrá generar sin esfuerzo documentos PDF atractivos y bien estructurados. Hemos explorado varias librerías como jsPDF, pdfmake, y React-PDF, cada una con sus propias fortalezas y características únicas.

Con el proceso de integración sencillo de IronPDF para frameworks y bibliotecas en JavaScript, excelente documentación y soporte técnico receptivo, los desarrolladores pueden comenzar a trabajar en poco tiempo, convirtiéndolo en una opción principal para generar PDFs de calidad profesional en aplicaciones de Node.js.

IronPDF ofrece una prueba gratuita de su funcionalidad completa. También está disponible para otros lenguajes como C# .NET, Java y Python. Visite el sitio web de IronPDF para más detalles.

Darrius Serrant
Darrius Serrant
  Chatea con el equipo de ingeniería ahora
Ingeniero de Software Full Stack (WebOps)

Darrius Serrant tiene una licenciatura en Informática de la Universidad de Miami y trabaja como Ingeniero de Marketing WebOps Full Stack en Iron Software. Atraído por la programación desde una edad temprana, veía la computación como algo misterioso y accesible, lo que la convertía en el medio perfecto para la creatividad y la resolución de problemas.

En Iron Software, Darrius disfruta creando cosas nuevas y simplificando conceptos complejos para hacerlos más comprensibles. Como uno de nuestros desarrolladores residentes, también se ha ofrecido como voluntario para enseñar a los estudiantes, compartiendo su experiencia con la próxima generación.

Para Darrius, su trabajo es gratificante porque es valorado y tiene un impacto real.

< ANTERIOR
Editor de PDF en JavaScript (Tutorial para desarrolladores)
SIGUIENTE >
Cómo crear archivos PDF en JavaScript

Instalar con npm

Versión:2025.3

> npm i @ironsoftware/ironpdf

Informar un Problema

¿Listo para empezar? Versión: 2025.3 acaba de salir

Empezar gratis
Descarga npm Iniciar prueba gratuita
Ver licencias >
Textlogo Iron Suite related to Cómo crear un archivo PDF en React

IronPDF forma parte de IRONSUITE

10 productos API de .NET para tus documentos de oficina

Obtén 10 productos por el precio de 2   Iniciar prueba gratuita