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

Publicado en 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 empezar!

PDF(Formato de documento portátil) es un formato de archivo muy 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 tieneun tutorial sobre la creación de PDF con 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 accesorios 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(Gestor de paquetes Node). 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 tiene instalados o si sus versiones están obsoletas, debe descargar e instalar la última versión de la asistencia a largo plazo(LTS) versión de Node.js de supá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 usando 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. Entre ellos figuran varios componentes de la biblioteca Material-UI, la biblioteca jsPDF para generar PDF 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 añadir un comportamiento consistente entre navegadores a nuestra aplicación, hemos utilizado la utilidad styled de la librería 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 hacer un seguimiento de los datos del cliente, items para hacer un seguimiento de la lista de artículos de 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

A continuación se muestra el código de la función generarFactura:

// 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 generarFactura, primero realizamos una 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 rellenados. Si alguno de estos campos está vacío, establecemos el estado error a true y retornamos antes de tiempo.

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 añadir texto en coordenadas específicas de 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 de la cabecera, añadimos la sección "Elementos" ajustando el tamaño de la fuente y añadiendo una línea con doc.line para separar los elementos de la cabecera. A continuación, iteramos sobre cada artículo de la matriz items y calculamos el precio total de cada artículo multiplicando la cantidad por el precio. Actualizamos la variable total con la suma de los totales de todos los artículos.

Para cada artículo, utilizamos doc.text para añadir el nombre del artículo, la cantidad, el precio y el total del artículo al documento PDF. Incrementamos la variable yOffset para pasar a la siguiente línea en cada elemento. Por último, añadimos una línea para separar los elementos del total y utilizamos doc.text para añadir la cantidad total en la parte inferior derecha del documento.

Una vez añadido el contenido, utilizamos doc.save("factura.pdf") para guardar el PDF generado como "factura.pdf" en el ordenador del usuario. Por último, restablecemos el estado error a false para borrar cualquier error de validación anterior.

Paso 4: Renderizar la interfaz de usuario

La sentencia return contiene el código JSX que maneja el proceso de renderizado. 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 librería 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 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 podrás ver la aplicación en tu navegador en http://localhost:3000.

Cómo crear un archivo PDF en React - Figura 2: La solicitud de factura completa con los campos sin rellenar por defecto.

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 partidas rellenadas, con diferentes artículos, cantidades y precios.

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 porque no se han rellenado todos los campos.

IronPDF - La biblioteca PDF de Node.js

IronPDF for Node.js es una completa biblioteca PDF de Node.js que destaca por su 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.

He aquí un ejemplo de generación de un documento PDF a partir de unArchivo HTMLCadena HTML yURL:

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 ver más ejemplos de código sobre tareas relacionadas con PDF, visite este enlacePá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 sencillo proceso de integración de IronPDF para frameworks y bibliotecas en JavaScript, excelentesdocumentacióny un soporte técnico receptivo, los desarrolladores pueden empezar a trabajar en muy poco tiempo, lo que lo convierte en la mejor opción para generar PDF de calidad profesional en aplicaciones Node.js.

IronPDF ofrece unprueba gratuita de su funcionalidad completa. También está disponible para otros idiomas comoC# .NET, JavayPython. Visite elSitio web de IronPDF para más detalles.

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

Instalar con npm

Versión:2024.11

> npm i @ironsoftware/ironpdf

Informar un Problema

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

Instalación gratuita de npm Ver licencias >