Gerar PDFs em React não é complicador, mas exige escolher a ferramenta certa desde o início
A maioria dos desenvolvedores que chegam na área frontend tenta resolver geração de PDF de forma improvisada. O problema é que CSS para impressão e bibliotecas JS resolvem coisas diferentes. Se você já tentou fazer um relatório simples e o layout quebrou no impressão, provavelmente esbarrou nessa confusão. O caminho mais comum hoje envolve bibliotecas como react-pdf, jspdf, html2canvas combinado com jsPDF, ou react-to-print. Cada uma funciona num cenário distinto. Escolher a errada gera dor de cabeça silenciosa que dura semanas.
react javascript pdf: abordagens práticas e limites reais
Vou explicar do jeito que eu uso em projetos de verdade, não da forma que a documentação vende. A abordagem com react-pdf (a do Meta, baseada no PDFLib por baixo) é a que mais se aproxima do que desenvolvedores React esperam. Você escreve componentes React normais e eles são renderizados como PDF no servidor ou no client. A API é declarativa:
<Document> <Page> elementos como <Text>, <View>, <Image>. O ponto que ninguém menciona na doc é que o sistema de layout usa flexbox adaptado, não CSS puro. Coisas como position: absolute não funcionam da forma que você espera. Bordas, paddings e espaçamentos precisam ser definidos dentro do objeto style do componente, e unidades relativas como "rem" não existem. Tudo é pixels ou valores unit-less.
Eu tive um caso específico num projeto de relatórios financeiros onde precisava colocar uma tabela com 47 linhas e rodapé fixo na última página. O react-pdf simplesmente não suporta fixed footer por página de forma nativa. A workaround que funcionou foi separar o conteúdo em blocos e usar a prop render do Page para injetar manualmente o rodapé via page.addText() com posicionamento absoluto no eixo Y baseado na altura da página menos a margem. Gastei cerca de 3 horas debugando isso porque a documentação não cobre esse padrão. Já se o seu caso é gerar PDF a partir de HTML existente — um relatório que já existe no frontend com tabelas complexas, gráficos, cores exatas — o ecossistema muda completamente. Aí entram html2canvas + jsPDF ou o serviço react-to-print.
👉 Clique no botão abaixo para saber mais sobre o assunto!
O html2canvas converte o DOM em canvas e o jsPDF transforma esse canvas em PDF. É rápido para protótipos. O problema é qualidade. Imagens ficam com resolução limitada pelo device pixel ratio, texto selecionável não existe no PDF final, e layouts com overflow ou position absolute quebram sem aviso. Eu vi um relatório onde uma tabela com scroll horizontal simplesmente cortava 40% do conteúdo na geração do PDF. A correção foi forçar overflow: visible no container durante a captura e ajustar o scale do canvas manualmente para 2x. Uma alternativa que muita gente ignora é usar o chrome headless via backend. Você monta o PDF no React normal com CSS real, envia o HTML renderizado para um endpoint que roda Chromium em modo headless e devolve o PDF. A fidelidade visual é praticamente 100%. O custo é infraestrutura — precisa de um servidor rodando Chrome, o que adiciona latência ecomplexidade operacional. Para APIs internas ou relatórios batch, costuma valer a pena. Para feature do usuário final em tempo real, não.
Sobre performance, há um detalhe prático que acelera bastante: não gere o PDF no client quando o conteúdo for maior que 10 páginas. O react-pdf em modo SSR ou com NodeCanvas roda cerca de 5 a 8 vezes mais rápido que a versão browser. Eu medi isso num projeto com 25 páginas de conteúdo dinâmico — levou 4 segundos no browser contra 500ms no Node. A diferença é absurda e muda a experiência do usuário completamente. O lado ruim que preciso deixar claro: react-pdf não suporta fontes customizadas via URL de forma trivial. Você precisa embedar o TTF no bundle ou usar a API de registerFont no Node. Se seu relatório precisa de uma fonte específica da identidade visual da empresa, prepare-se para um passo extra de configuração. Fontes do Google Fonts funcionam se você fizer o download manual e registrar corretamente, mas há um bug conhecido em versões anteriores ao 3.7 onde caracteres com acentuação podem falhar se o encoding não for especificado.
Para quem está começando agora e quer algo que funcione rápido sem muito ajuste fino, recomendo react-to-print para casos simples de uma única página ou relatório curto. Para relatórios mais pesados com tabelas e múltiplas páginas, vá de react-pdf com renderização no server. E se o requisito é fidelidade visual absoluta — layouts complexos, marcas d'água, assinaturas digitais — invista na solução headless com Chrome. Links úteis para cada abordagem:
react-pdf: https://react-pdf.org jsPDF: https://github.com/parallax/jsPDF
html2canvas: https://html2canvas.hertzen.com react-to-print: https://github.com/discourse/react-to-print
