📢 Esta librería ha cambiado de nombre a

@react-pdf-levelup/core

react-pdf-levelup

Generador de PDFs dinámicos con React. Esta herramienta te permite crear plantillas PDF con componentes JSX personalizados y previsualizarlas en tiempo real dentro de una aplicación web. Ideal para etiquetas, facturas, reportes, certificados, tablas y más.

🌐 Playground en vivo:

https://react-pdf-levelup.nimbux.cloud
or
https://react-pdf-levelup.nimbux.cloud

📦 Instalación

``bash
npm install react-pdf-levelup
`

🚀 Características

- 🧱 Construye PDFs con componentes de React usando los componentes de react-pdf-levelup (LayoutPDF, texto, listas, QR, tablas, columnas, etc.)
- 🖼 Vista previa en tiempo real de los documentos generados
- 🎨 Editor en vivo con Monaco Editor para personalizar código JSX
- 📦 Plantillas predefinidas listas para usar
- 📄 Soporte para códigos QR, tablas, imágenes, listas, layout dinámico, etc.
- 🔄 Generación de PDFs desde templates de React
- 📥 Descarga automática y vista previa de PDFs generados

📋 Funciones Principales

$3

Genera un PDF en formato base64 a partir de un componente de React.

`typescript
import { generatePDF } from "react-pdf-levelup";

const pdfBase64 = await generatePDF({
template: MyPDFTemplate,
data: {
title: "Mi Documento",
items: ["Item 1", "Item 2", "Item 3"],
},
});
`

Parámetros:

- template: Componente de React que define la estructura del PDF
- data: Datos opcionales que se pasarán al template

Retorna: Promise que resuelve a un string en base64 del PDF generado

$3

Decodifica un PDF en base64 y permite descargarlo o abrirlo en una nueva pestaña.

`typescript
import { decodeBase64Pdf } from "react-pdf-levelup";

// Después de generar el PDF
const pdfBase64 = await generatePDF({ template: MyTemplate });

// Descargar y abrir el PDF
decodeBase64Pdf(pdfBase64, "mi-documento.pdf");
`

Parámetros:

- base64: String del PDF en formato base64
- fileName: Nombre del archivo para la descarga

Funcionalidad:

- Descarga automática del archivo PDF
- Abre el PDF en una nueva pestaña del navegador
- Limpia automáticamente los recursos de memoria

💡 Ejemplo de Uso con componentes levelup

`typescript
import React from 'react';
import { generatePDF, decodeBase64Pdf, LayoutPDF, H1, P, Strong, Em, HR, Container, Row, Col6, UL, LI, QR, Table, Thead, Tbody, Tr, Th, Td } from 'react-pdf-levelup';

const MyPDFTemplate = ({ data }) => (

Documento de Presentación

Bienvenido a react-pdf-levelup. Construye PDFs con componentes de React de forma rápida y tipada.

---

• Plantillas listas


• Componentes composables


• TypeScript


• Integración moderna

Producto	Cantidad	Precio	Total
Etiqueta Térmica 50x30	2	$5.00	$10.00

);

// Función para generar y descargar PDF
const handleGeneratePDF = async () => {
try {
const pdfBase64 = await generatePDF({
template: MyPDFTemplate,
data: {
title: 'Mi Lista de Tareas',
items: [
'Revisar documentación',
'Implementar nuevas funciones',
'Realizar pruebas',
'Desplegar a producción'
]
}
});

// Descargar y abrir el PDF
decodeBase64Pdf(pdfBase64, 'lista-tareas.pdf');

} catch (error) {
console.error('Error generando PDF:', error);
}
};

// Componente React
const App = () => {
return (

Generador de PDF

Generar y Descargar PDF

);
};

export default App;
`

🎨 Templates Avanzados

`typescript
import { StyleSheet, Font } from '@react-pdf/renderer';

// Ejemplo de template para factura
const InvoiceTemplate = ({ data }) => (



{data.company}
Factura #{data.invoiceNumber}



Cliente: {data.customer.name}
Email: {data.customer.email}



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

{item.name}
{item.quantity}
${item.price}

))}



Total: ${data.total}



);
`

🔧 Configuración Avanzada

$3

`typescript
const handlePDFGeneration = async () => {
try {
const pdfBase64 = await generatePDF({
template: MyTemplate,
data: myData,
});

decodeBase64Pdf(pdfBase64, "documento.pdf");
} catch (error) {
if (error.message.includes("Template not provided")) {
console.error("Error: No se proporcionó un template válido");
} else {
console.error("Error inesperado:", error.message);
}
}
};
`

$3

`typescript
const generatePDFOnly = async () => {
const pdfBase64 = await generatePDF({
template: MyTemplate,
data: myData,
});

// Usar el base64 para otros propósitos (envío por API, almacenamiento, etc.)
console.log("PDF generado:", pdfBase64);
return pdfBase64;
};
`

🛠 Dependencias

Esta librería utiliza internamente:

- @react-pdf/renderer - Para la generación de PDFs
- react - Para los componentes JSX

📝 Notas Importantes

- La función decodeBase64Pdf solo funciona en contexto de navegador (requiere document)
- Los templates deben usar los componentes de react-pdf-levelup y retornar JSX válido
- El PDF se genera de forma asíncrona, asegúrate de usar await o .then()
- Los recursos de memoria se limpian automáticamente después de la descarga

🌐 API REST para generar PDFs

- Genera PDFs vía HTTP desde cualquier lenguaje usando un template TSX en base64 y un objeto de datos.
- Devuelve un JSON con data.pdf que es el PDF en base64.

$3

- Cloud: https://react-pdf-levelup.nimbux.cloud/api
- Auto‑hospedado ZIP: https://genarogg.github.io/react-pdf-levelup/public/api.zip

`text
https://react-pdf-levelup.nimbux.cloud/api
`

`text
https://genarogg.github.io/react-pdf-levelup/public/api.zip
`

$3

POST con Content-Type: application/json:

`json
{
"template": "",
"data": { "campo": "valor" }
}
`

$3

`json
{
"data": {
"pdf": ""
}
}
`

$3

`ts
import fs from "fs";
import path from "path";

type ApiResponse = { data?: { pdf?: string } };
const ENDPOINT_API = "https://react-pdf-levelup.nimbux.cloud/api";

const petition = async ({
template,
data,
}: {
template: string;
data: any;
}): Promise => {
const templatePath = path.join(process.cwd(), "src", "useExample", template);
const tsxCode = fs.readFileSync(templatePath, "utf-8");
const templateBase64 = Buffer.from(tsxCode, "utf-8").toString("base64");

const res = await fetch(ENDPOINT_API, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ template: templateBase64, data }),
});
if (!res.ok)
throw new Error(API error (${res.status}): ${await res.text()});
const json = (await res.json()) as ApiResponse;
return json?.data?.pdf ?? "";
};

const savePDF = (base64: string) => {
const buffer = Buffer.from(base64, "base64");
const outputPath = path.join(process.cwd(), "example.pdf");
fs.writeFileSync(outputPath, buffer);
console.log("PDF guardado:", outputPath);
};
`

$3

- Descarga el paquete ZIP y despliega en tu infraestructura (Node/Docker/PaaS).
- Expón el endpoint /api/pdf` con el mismo contrato JSON.
- Usa el mismo cliente mostrado arriba apuntando a tu URL.

Más detalles y ejemplos en la documentación:
Guía API REST (fetch)

🤝 Contribuir

Las contribuciones son bienvenidas. Por favor, abre un issue o envía un pull request.

📄 Licencia

MIT License