Geração de relatórios PDF em TypeScript: biblioteca pdf-lib

Geração de relatórios PDF em TypeScript com a biblioteca pdf-lib

No desenvolvimento web moderno, surge frequentemente a necessidade de criar documentos no formato PDF — desde recibos e comprovantes simples até relatórios analíticos complexos com gráficos. TypeScript, como uma extensão fortemente tipada do JavaScript, oferece excelentes capacidades para trabalhar com PDF. Entre muitas bibliotecas, destaca-se a pdf-lib — uma ferramenta poderosa, totalmente do lado do cliente, que não requer dependências de servidor.

Neste artigo, vamos detalhar como usar a pdf-lib para gerar relatórios PDF em TypeScript, incluindo instalação, operações básicas e técnicas avançadas.

O que é pdf-lib?

pdf-lib é uma biblioteca de código aberto escrita em TypeScript que permite criar e editar documentos PDF diretamente no navegador ou no ambiente Node.js. Suas principais vantagens:

• Suporte completo a TypeScript (todos os tipos incluídos)
• Funciona sem dependências externas (sem necessidade de Puppeteer ou wkhtmltopdf)
• Capacidade de trabalhar com PDFs existentes (mesclagem, inserção de páginas)
• Suporte a caracteres cirílicos e quaisquer fontes
• Incorporação de imagens (PNG, JPG, SVG)
• Criação de formulários e anotações

Instalação e configuração

A instalação é feita com o gerenciador de pacotes padrão:

npm install pdf-lib# ouyarn add pdf-lib

Para trabalhar com TypeScript, nenhuma ação adicional é necessária — todos os tipos já estão incluídos no pacote.

Exemplo básico: criando um relatório simples

Vamos criar um documento PDF mínimo com título e texto:

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

async function createSimpleReport() {  // 1. Criar um novo documento PDF  const pdfDoc = await PDFDocument.create();    // 2. Adicionar uma página (formato A4: 595.28 x 841.89 pontos)  const page = pdfDoc.addPage([595.28, 841.89]);    // 3. Incorporar a fonte padrão  const font = await pdfDoc.embedFont(StandardFonts.Helvetica);    // 4. Desenhar o título  page.drawText('Relatório de vendas do Q1 2025', {    x: 50,    y: 800,    size: 24,    font: font,    color: rgb(0, 0.2, 0.6),  });    // 5. Desenhar o texto principal  page.drawText('Receita total: R$ 1.234.567,00', {    x: 50,    y: 760,    size: 14,    font: font,    color: rgb(0, 0, 0),  });    // 6. Salvar o documento em Uint8Array  const pdfBytes = await pdfDoc.save();  return pdfBytes;}

Trabalhando com tabelas e dados

Para criar relatórios tabulares, é necessária um pouco mais de lógica. Aqui está um exemplo de geração de tabela com dados:

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]; // Produto, Quantidade, Preço, Total    // Cabeçalho da tabela  const headers = ['Produto', 'Quantidade', 'Preço', '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;    // Linhas de dados  for (const record of data) {    const total = reco