Pruebas en un entorno real
Pruebe en producción sin marcas de agua.
Funciona donde lo necesites.
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.
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:
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.
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.
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.
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.
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
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
Para iniciar el servidor de desarrollo y ver tu nueva aplicación React en acción, ejecuta el siguiente comando:
npm start
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.
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).
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;
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;
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:
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:
fontFamily
: Establece la familia de fuentes del texto.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:
npm install @ironsoftware/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';
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.
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 gratuitaque 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.
9 productos API .NET para sus documentos de oficina