TongoRender — HTML to PDF, Image & Screenshot API for Developers

Criar faturas manualmente é tedioso, propenso a erros e simplesmente não escala. Seja você dono de uma plataforma SaaS que cobra centenas de clientes ou uma loja virtual que processa milhares de pedidos, você precisa de uma forma de gerar faturas profissionais automaticamente. Neste tutorial, vamos construir um sistema completo de geração de faturas usando templates HTML e a API de PDF do TongoRender.

O Problema: Criação Manual de Faturas Não Escala

Muitos negócios pequenos começam com uma planilha ou um modelo de documento Word para faturas. Isso funciona bem quando você tem cinco clientes, mas rapidamente se torna insustentável:

Custo de tempo — Cada fatura leva de 5 a 15 minutos para criar manualmente. Com 100 faturas por mês, são 8 a 25 horas de digitação tediosa.
Erros — A digitação manual leva a erros de digitação, valores incorretos e itens faltando. Erros em faturas prejudicam a confiança do cliente e criam dores de cabeça contábeis.
Inconsistência — Diferentes membros da equipe produzem faturas com formatações diferentes, fazendo sua empresa parecer pouco profissional.
Sem rastro de auditoria — Faturas manuais dificultam o rastreamento do que foi enviado, quando e para quem.

A Solução: Geração Baseada em Templates via API

A abordagem moderna é separar o template da fatura (o design visual) dos dados da fatura (informações do cliente, itens, valores). Sua aplicação gera o HTML mesclando o template com os dados e então envia para uma API de PDF para produzir um documento polido.

Esta abordagem oferece:

Velocidade — Gere centenas de faturas por minuto.
Precisão — Os dados vêm diretamente do seu banco de dados, eliminando erros manuais.
Consistência — Toda fatura usa o mesmo template e identidade visual.
Automação — Dispare a geração de faturas em eventos como renovação de assinatura, conclusão de pedido ou recebimento de pagamento.

Passo 1: Projete Seu Template de Fatura

Comece com um template HTML que represente o layout da sua fatura. Use CSS para estilização — a API de PDF vai renderizá-lo exatamente como um navegador faria:

const faturaTemplate = (dados) => `
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: 'Helvetica Neue', Arial, sans-serif; color: #333; margin: 0; padding: 40px; }
    .header { display: flex; justify-content: space-between; margin-bottom: 40px; }
    .nome-empresa { font-size: 24px; font-weight: bold; color: #1a1a2e; }
    .info-fatura { text-align: right; }
    .numero-fatura { font-size: 18px; font-weight: bold; color: #6c63ff; }
    table { width: 100%; border-collapse: collapse; margin: 30px 0; }
    th { background: #f8f9fa; text-align: left; padding: 12px; border-bottom: 2px solid #dee2e6; }
    td { padding: 12px; border-bottom: 1px solid #eee; }
    .linha-total { font-weight: bold; font-size: 18px; }
  </style>
</head>
<body>
  <div class="header">
    <div>
      <div class="nome-empresa">${dados.empresa.nome}</div>
      <div>${dados.empresa.endereco}</div>
      <div>${dados.empresa.email}</div>
    </div>
    <div class="info-fatura">
      <div class="numero-fatura">Fatura #${dados.numeroFatura}</div>
      <div>Data: ${dados.data}</div>
      <div>Vencimento: ${dados.dataVencimento}</div>
    </div>
  </div>
  <h3>Cobrar De</h3>
  <p>${dados.cliente.nome}<br/>${dados.cliente.endereco}<br/>${dados.cliente.email}</p>
  <table>
    <thead><tr><th>Descrição</th><th>Qtd</th><th>Valor Unitário</th><th>Total</th></tr></thead>
    <tbody>
      ${dados.itens.map(item => `
        <tr>
          <td>${item.descricao}</td>
          <td>${item.quantidade}</td>
          <td>R$ ${item.valorUnitario.toFixed(2)}</td>
          <td>R$ ${(item.quantidade * item.valorUnitario).toFixed(2)}</td>
        </tr>
      `).join('')}
      <tr class="linha-total">
        <td colspan="3">Total</td>
        <td>R$ ${dados.total.toFixed(2)}</td>
      </tr>
    </tbody>
  </table>
</body>
</html>
`;

Passo 2: Mescle os Dados com o Template

Busque os dados da fatura no seu banco de dados e passe para a função do template:

const dadosFatura = {
  empresa: {
    nome: 'Acme Ltda',
    endereco: 'Av. Paulista, 1000, São Paulo, SP 01310-100',
    email: 'faturamento@acme.com.br',
  },
  cliente: {
    nome: 'Maria Silva',
    endereco: 'Rua das Flores, 456, Rio de Janeiro, RJ 20040-020',
    email: 'maria@exemplo.com.br',
  },
  numeroFatura: 'FAT-2026-0042',
  data: '2026-03-01',
  dataVencimento: '2026-03-31',
  itens: [
    { descricao: 'Serviços de Desenvolvimento Web', quantidade: 40, valorUnitario: 250 },
    { descricao: 'Design UI/UX', quantidade: 20, valorUnitario: 200 },
    { descricao: 'Hospedagem (Anual)', quantidade: 1, valorUnitario: 960 },
  ],
  total: 40 * 250 + 20 * 200 + 960,
};

Passo 3: Gere o PDF com TongoRender

Agora envie o HTML renderizado para a API do TongoRender:

async function gerarFaturaPDF(html) {
  const response = await fetch('https://api.tongorender.io/v1/render/pdf', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer rf_live_sua_chave_api',
    },
    body: JSON.stringify({
      html,
      options: {
        format: 'A4',
        margin: { top: '15mm', bottom: '15mm', left: '15mm', right: '15mm' },
        printBackground: true,
      },
    }),
  });

  if (!response.ok) {
    throw new Error(`Falha na geração do PDF: ${response.statusText}`);
  }

  return Buffer.from(await response.arrayBuffer());
}

Passo 4: Automatize o Fluxo de Trabalho

Em uma aplicação real, você dispararia a geração de faturas automaticamente. Veja um exemplo com Express.js:

app.post('/api/faturas/:pedidoId/pdf', async (req, res) => {
  const pedido = await db.pedidos.findById(req.params.pedidoId);
  const cliente = await db.clientes.findById(pedido.clienteId);

  const dadosFatura = construirDadosFatura(pedido, cliente);
  const html = faturaTemplate(dadosFatura);
  const pdfBuffer = await gerarFaturaPDF(html);

  // Armazenar o PDF
  await storage.upload(`faturas/${dadosFatura.numeroFatura}.pdf`, pdfBuffer);

  // Enviar ao cliente
  await emailService.enviar({
    para: cliente.email,
    assunto: `Fatura ${dadosFatura.numeroFatura}`,
    anexos: [{ nomeArquivo: `${dadosFatura.numeroFatura}.pdf`, conteudo: pdfBuffer }],
  });

  res.json({ sucesso: true, numeroFatura: dadosFatura.numeroFatura });
});

Dicas para Faturas com Aparência Profissional

Use uma Paleta de Cores Consistente

Escolha duas ou três cores da sua marca e use-as de forma consistente. Use sua cor primária para o número da fatura e totais, uma cor neutra para o texto do corpo e um tom claro para cabeçalhos de tabela.

Inclua Seu Logo

Adicione o logo da sua empresa como imagem no cabeçalho. Use uma URL absoluta (por exemplo, https://suaempresa.com.br/logo.png) para que a API consiga buscá-lo durante a renderização.

Gerencie Faturas com Múltiplas Páginas

Para faturas com muitos itens, use regras CSS de quebra de página para evitar cortes estranhos:

table { page-break-inside: auto; }
tr { page-break-inside: avoid; }
thead { display: table-header-group; } /* Repete o cabeçalho em cada página */

Inclua Requisitos Legais

Dependendo da legislação brasileira, suas faturas podem precisar incluir CNPJ, inscrição estadual, dados bancários para pagamento e informações fiscais. Inclua tudo isso no seu template para que nunca sejam esquecidos.

Conclusão

A geração programática de faturas economiza tempo, elimina erros e escala com o seu negócio. Combinando templates HTML com uma API de PDF como o TongoRender, você tem controle total sobre o design enquanto delega a complexidade da renderização para um serviço gerenciado.

O TongoRender torna a geração de faturas extremamente simples: envie HTML, receba um PDF. Sem navegador para gerenciar, sem dependências para instalar.

Experimente o TongoRender gratuitamente — Gere até 100 faturas por mês no plano gratuito.