Como converter HTML para PDF

· 5 min de leitura

Criar PDFs a partir de HTML é útil para gerar faturas, relatórios, cartas, certificados e qualquer documento onde voce queira controlar o layout com CSS mas distribuir como PDF. Um conversor HTML-para-PDF baseado em navegador usa o motor de renderização do seu próprio navegador, então o resultado corresponde ao que voce ve na visualização ao vivo, sem uploads de servidor.

Como converter HTML em PDF

  1. Cole seu HTML: insira seu código HTML incluindo qualquer CSS inline ou tags <style> no editor. O código pode incluir a estrutura completa da página com cabeçalhos, tabelas, imagens e estilo.
  2. Visualize a saída: uma visualização ao vivo mostra exatamente como seu PDF ficará enquanto voce digita. Ajuste seu HTML e CSS até que a visualização corresponda ao que voce deseja.
  3. Gere e baixe: clique no botão gerar para criar o PDF no seu navegador, depois baixe-o instantaneamente.

O que voce pode criar

Uma breve história da conversão HTML-para-PDF

Na Web inicial (1995-2005), criar um PDF a partir de HTML exigia ferramentas do lado do servidor: Apache FOP (1999), PrinceXML (2002) ou wkhtmltopdf (2010), todas as quais rodavam em um servidor backend e exigiam o envio de conteúdo. A qualidade da saída variava enormemente porque cada motor de renderização implementava CSS de forma diferente.

A conversão do lado do navegador tornou-se prática em 2014 com bibliotecas como jsPDF e html2pdf.js, que usam HTML5 Canvas para rasterizar conteúdo. O resultado era decente para documentos simples mas falhava em layouts complexos e texto selecionável.

O avanço foi o modo headless do Chromium (2017), que expos o mesmo motor de renderização que o Chrome usa para páginas normais. Puppeteer (Node.js, 2017) tornou a geração de PDF Chromium do lado do servidor acessível para desenvolvedores. Conversores baseados em navegador agora usam a Print API (window.print()) com regras CSS @page, o mesmo caminho que o modo headless do Chromium usa, dando saída identica entre a visualização e o PDF.

Em 2026, HTML-para-PDF baseado em navegador é a escolha certa para a maioria dos documentos. A renderização do lado do servidor só faz sentido para documentos muito grandes (100+ páginas), processamento em lote automatizado, ou quando voce precisa mesclar PDFs de várias fontes.

Dicas de estilo para saída PDF

Use estilos inline ou tags <style>: folhas de estilo externas não são carregadas. Coloque todo o seu CSS seja inline em elementos ou em um bloco <style> no HTML.

Defina margens de página: use CSS @page { margin: 20mm; } para controlar o espaço em branco ao redor do seu conteúdo no PDF.

Use unidades amigáveis à impressão: mm, cm e pt são mais previsíveis em PDFs do que px ou rem. Use mm para margens e espaçamento que precisam corresponder às dimensões do mundo real.

Evite layouts dependentes da viewport: larguras percentuais e larguras de pixel fixas funcionam melhor. Unidades de viewport (vw, vh) podem não se comportar como esperado na saída PDF.

Controle as quebras de página: use page-break-before, page-break-after e page-break-inside (ou os mais novos break-before, break-after, break-inside) para controlar onde novas páginas começam. break-inside: avoid impede um único bloco de se dividir entre páginas.

Use @media print para regras apenas-PDF: qualquer CSS dentro de @media print { ... } aplica-se apenas ao gerar o PDF, não na visualização. Útil para esconder elementos apenas de tela como barras de navegação.

Exemplo de modo impressão CSS

@page {
  size: A4;
  margin: 20mm 15mm;
}

@media print {
  .no-print { display: none; }
  h1 { page-break-before: always; }
  table { page-break-inside: avoid; }
  a { color: black; text-decoration: none; }
}

body {
  font-family: 'Helvetica', sans-serif;
  font-size: 11pt;
  line-height: 1.4;
  color: #1a1a1a;
}

Tamanhos de página

Valores comuns de @page size:

Adicione landscape para orientação paisagem: size: A4 landscape.

Armadilhas comuns

Alternativas a considerar

Para documentos comerciais diários (faturas, relatórios, certificados), um conversor HTML-para-PDF de navegador é mais rápido e igualmente refinado.

Dicas

Privacidade e documentos confidenciais

O conversor HTML-para-PDF roda inteiramente no seu navegador. O HTML que voce cola, as imagens que voce incorpora e o PDF gerado todos permanecem no seu dispositivo. Nada é enviado para um servidor, registrado ou compartilhado com ninguém.

Isso importa porque entradas HTML-para-PDF são frequentemente sensíveis: dados de fatura com nomes de clientes, rascunhos de contratos com termos de preço, relatórios internos com cifras financeiras, certificados com informações pessoais. Serviços HTML-para-PDF em nuvem por design enviam seu HTML para o servidor deles, geram o PDF lá, e enviam de volta. Alguns retem entradas para "melhoria" ou análise. Para documentos contendo informações confidenciais, um conversor baseado em navegador é a escolha mais segura.

A conversão baseada em navegador também funciona offline uma vez que a página é carregada, e é rápida o suficiente para feedback instantaneo enquanto voce itera no HTML.

Experimente estas ferramentas

Conversor HTML para PDF Markdown para PDF Formatador HTML

Perguntas frequentes

O PDF preserva minha estilização CSS?

Sim. O conversor renderiza seu HTML com a estilização CSS aplicada, incluindo cores, fontes, margens e layout. O PDF fica parecido com a página web renderizada, não com o código-fonte bruto.

Posso incluir imagens no PDF?

Sim. Use imagens codificadas em base64 (URIs de dados) para resultados mais confiáveis. URLs de imagens externas podem funcionar se forem acessíveis e estiverem com CORS habilitado.

Meu HTML é enviado a um servidor?

Não. A conversão acontece inteiramente no seu navegador. Seu código e o PDF gerado nunca saem do seu dispositivo.

Quais recursos CSS são suportados?

O CSS padrão, incluindo layouts, cores, fontes, fundos, bordas e tabelas, é bem suportado. Recursos avançados como CSS Grid, animações complexas e alguns casos extremos de Flexbox podem ter suporte limitado.