React Javascript Pdf

Gerando PDFs em aplicações React com JavaScript

A maioria dos desenvolvedores que precisa gerar PDFs em projetos React tropeça na primeira tentativa. O ecossistema é fragmentado e as soluções variam drasticamente dependendo do que você realmente precisa. Vou explicar como funciona na prática, com os problemas que eu encontrei e as soluções que sobrevivem até hoje.

react javascript pdf: bibliotecas disponíveis

Existem basicamente três abordagens principais. A primeira e mais direta é usar react-pdf, uma biblioteca que permite renderizar documentos PDF usando componentes React. Você define o documento como uma hierarquia de componentes e ela gera o PDF no lado do servidor ou no navegador, dependendo da configuração. A segunda opção é jsPDF, uma biblioteca puramente JavaScript que cria PDFs programaaticamente. Não tem integração específica com React, mas funciona perfeitamente dentro de componentes. Você desenha elementos manualmente: textos, linhas, imagens, tabelas. É mais baixo nível, mas dá controle total sobre o layout.

A terceira abordagem usa PDF-lib, focada em manipular PDFs existentes. Se o seu problema é preencher formulários, mesclar documentos ou adicionar texto a um PDF pré-existente, essa é a ferramenta certa. Não gera PDFs do zero, mas edita o que já existe. Para relatórios complexos com muitos dados, eu normalmente recomendo react-pdf com renderização no servidor via Node.js. Para ações simples como gerar um comprovante ou recibo, jsPDF resolve rápido.

Implementação prática com react-pdf

Vou mostrar o fluxo real. Primeiro, a instalação: npm install @react-pdf/renderer

Depois, você cria um componente que representa o documento. Cada página é um elemento Page, dentro dele você usa View, Text, Image e outros componentes similares ao CSS Flexbox. Sim, o sistema de layout do react-pdf é basicamente flexbox limitado. Funciona para a maior parte dos casos, mas tem restrições importantes. Veja um exemplo mínimo:

import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
  page: { padding: 30 },
  title: { fontSize: 18, marginBottom: 10 },
  row: { flexDirection: 'row', justifyContent: 'space-between' },
});

function MeuPDF({ dados }) {
  return (
    <Document>
      <Page size="A4" styles={styles}>
        <Text style={styles.title}>Relatório</Text>
        <Text>Total: {dados.total}</Text>
      </Page>
    </Document>
  );
} Para renderizar e baixar, você usa a API PDFViewer para preview no navegador ou download() para salvar direto. No lado do servidor, usa-se renderToBuffer(), que retorna um buffer pronto para envio como resposta HTTP.

O problema que ninguém menciona: paginação automática

O react-pdf faz paginação automática, o que parece conveniente até você precisar controlar onde uma quebra de página acontece. O comportamento padrão ele quebra quando o conteúdo ultrapassa a altura da página, mas isso significa que tabelas podem ser partidas ao meio, títulos ficam sozinhos no fundo da página, e itens de lista se separam artificialmente. A solução é usar a propriedade break nos elementos. Exemplo: <View break={true}> força uma quebra de página antes daquele elemento. avoid={true} tenta manter o conteúdo inteiro sem dividir. Eu passei uma tarde inteira ajustando um relatório financeiro porque uma tabela de 40 linhas sempre quebrava no meio de uma linha de subtotal. A correção foi envolver cada linha da tabela em <View avoid> e definir uma margem inferior fixa na página.

Outro problema real: fontes personalizadas. O react-pdf não carrega fontes do sistema automaticamente. Você precisa registrar a fonte usando Font.register() e fornecer o arquivo .ttf ou .otf como um blob ou URL. Sem isso, textos em português com acentos podem aparecer com caracteres estranhos ou sumir completamente no PDF final. Eu perdi duas horas num projeto porque o acento circunflexo do "ô" não estava sendo renderizado. A solução foi registrar a fonte Roboto manualmente e garantir que o arquivo da fonte incluísse os glifos latinos completos.

Performance e casos onde a abordagem falha

React-pdf funciona bem para documentos com até algumas centenas de elementos. Acima disso, o tempo de renderização cresce exponencialmente porque cada elemento precisa ser calculado individualmente pelo motor de layout. Um relatório com 2.000 linhas de tabela levou cerca de 8 segundos para ser gerado no meu computador. Em produção, com memória limitada, isso pode causar timeout ou crash do processo. Para documentos grandes, a alternativa é dividir o conteúdo em múltiplos documentos menores e depois mesclar com PDF-lib. Isso reduz o tempo de geração para cerca de 1 a 2 segundos por parte, e o resultado final é idêntico. A desvantagem é que a paginação entre partes não é contínua — cada parte começa uma nova página, então você perde numeração sequencial se estiver usando.

Outro ponto importante: react-pdf não suporta tabelas com células expansivas de forma confiável. Se você tem uma célula que precisa crescer conforme o conteúdo, o layout pode colapsar silenciosamente. A workaround é usar display: flex com flexDirection: 'column' dentro da célula e definir altura fixa para as outras células da mesma linha. Se o seu caso envolve PDFs com muitas imagens de alta resolução, considere pré-comprimi-las. Imagens de 5MB cada fazem o buffer do PDF disparar para 50MB ou mais. Eu usei a biblioteca sharp para redimensionar e comprimir imagens antes de embeddá-las no documento, e o tamanho final caiu de 47MB para 8MB sem perda visível de qualidade.

Alternativa: jsPDF para casos simples

Se o seu PDF é algo simples — um cupom, um certificado, um relatório de uma página — react-pdf é overkill. JsPDF é muito mais leve e rápido. A instalação é npm install jspdf e a API é direta: import jsPDF from 'jspdf';

const doc = new jsPDF();
doc.text('Título', 10, 10);
doc.text(`Valor: R$ ${valor}`, 10, 20);
doc.save('documento.pdf');

O problema do jsPDF é que não há sistema de layout declarativo. Tudo é posicionamento absoluto em coordenadas X e Y. Se você precisar mudar algo no design, precisa recalibrar todas as posições manualmente. Para documentos únicos e estáveis, não é tão ruim. Para relatórios dinâmicos que mudam frequentemente, vira manutenção dolorosa.

react javascript pdf: qual escolher

A decisão depende do tipo de documento e da complexidade do layout. Se você precisa de um documento estruturado com várias páginas, tabelas, cabeçalhos e rodapés repetidos, react-pdf é a escolha correta. A curva de aprendizado é maior, mas o ganho em produtividade aparece depois da segunda implementação. Se o documento é simples, uma página, conteúdo básico, jsPDF resolve em minutos. A perda de flexibilidade não é relevante nesse cenário.

Para manipular PDFs existentes — preencher campos, adicionar assinaturas, mesclar arquivos — PDF-lib é imbatível. Ele não faz renderização de componentes React, então não se aplica diretamente ao contexto react javascript pdf, mas complementa bem as outras duas bibliotecas quando você precisa combinar geração com edição. O ecossistema não tem uma solução única que cubra todos os casos. A maioria dos projetos que eu vi acaba combinando duas ou mais bibliotecas. É irritante, mas reflete a realidade: geração de PDF é um problema difícil e nenhum strumento single-purpose resolve tudo com elegância.

Se você está começando agora, configure o react-pdf com renderização no servidor desde o início. Renderizar no browser funciona para testes, mas em produção você quer evitar carregar o motor de renderização do PDF no cliente. O tempo de loading aumenta, a experiência do usuário piora, e você perde capacidade de lidar com documentos grandes.