Generación de informes PDF en TypeScript: librería pdf-lib

Generación de informes PDF en TypeScript con la librería pdf-lib

En el desarrollo web moderno, a menudo surge la necesidad de crear documentos en formato PDF, desde simples recibos y comprobantes hasta complejos informes analíticos con gráficos. TypeScript, como extensión fuertemente tipada de JavaScript, ofrece excelentes capacidades para trabajar con PDF. Entre las muchas librerías, destaca pdf-lib, una herramienta potente, completamente del lado del cliente, que no requiere dependencias de servidor.

En este artículo, analizaremos en detalle cómo usar pdf-lib para generar informes PDF en TypeScript, incluyendo instalación, operaciones básicas y técnicas avanzadas.

¿Qué es pdf-lib?

pdf-lib es una librería de código abierto escrita en TypeScript que permite crear y editar documentos PDF directamente en el navegador o en el entorno Node.js. Sus principales ventajas son:

• Soporte completo para TypeScript (todos los tipos incluidos)
• Funciona sin dependencias externas (no necesita Puppeteer ni wkhtmltopdf)
• Capacidad para trabajar con PDF existentes (fusión, inserción de páginas)
• Soporte para cirílico y cualquier fuente
• Incrustación de imágenes (PNG, JPG, SVG)
• Creación de formularios y anotaciones

Instalación y configuración

La instalación se realiza con el gestor de paquetes estándar:

npm install pdf-lib# oyarn add pdf-lib

Para trabajar con TypeScript no se requieren acciones adicionales, ya que todos los tipos están incluidos en el paquete.

Ejemplo básico: creación de un informe simple

Veamos la creación de un documento PDF mínimo con un título y texto:

import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';

async function createSimpleReport() {  // 1. Creamos un nuevo documento PDF  const pdfDoc = await PDFDocument.create();    // 2. Agregamos una página (formato A4: 595.28 x 841.89 puntos)  const page = pdfDoc.addPage([595.28, 841.89]);    // 3. Cargamos la fuente estándar  const font = await pdfDoc.embedFont(StandardFonts.Helvetica);    // 4. Dibujamos el título  page.drawText('Informe de ventas Q1 2025', {    x: 50,    y: 800,    size: 24,    font: font,    color: rgb(0, 0.2, 0.6),  });    // 5. Dibujamos el texto principal  page.drawText('Ingresos totales: 1 234 567 руб.', {    x: 50,    y: 760,    size: 14,    font: font,    color: rgb(0, 0, 0),  });    // 6. Guardamos el documento en un Uint8Array  const pdfBytes = await pdfDoc.save();  return pdfBytes;}

Trabajo con tablas y datos

Para crear informes tabulares se necesita un poco más de lógica. Aquí hay un ejemplo de generación de una tabla con datos:

import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';

interface SaleRecord {  product: string;  quantity: number;  price: number;}

async function createTableReport(data: SaleRecord[]) {  const pdfDoc = await PDFDocument.create();  const page = pdfDoc.addPage([595.28, 841.89]);  const font = await pdfDoc.embedFont(StandardFonts.Helvetica);  const boldFont = await pdfDoc.embedFont(StandardFonts.HelveticaBold);    const startX = 50;  let startY = 800;  const rowHeight = 25;  const colWidths = [200, 100, 100, 100]; // Nombre, Cantidad, Precio, Total    // Encabezado de la tabla  const headers = ['Nombre', 'Cantidad', 'Precio', 'Total'];  page.drawText(headers[0], { x: startX, y: startY, size: 12, font: boldFont });  page.drawText(headers[1], { x: startX + colWidths[0], y: startY, size: 12, font: boldFont });  page.drawText(headers[2], { x: startX + colWidths[0] + colWidths[1], y: startY, size: 12, font: boldFont });  page.drawText(headers[3], { x: startX + colWidths[0] + colWidths[1] + colWidths[2], y: startY, size: 12, font: boldFont });    startY -= rowHeight;    // Filas de datos  for (const record of data) {    const total = reco