Conversão de HTML para PDF: tratamento de estilos CSS e layout de página

Por que converter HTML para PDF

Conteúdo de páginas web que você deseja imprimir, arquivar, compartilhar offline — converter para PDF é o mais conveniente. A conversão de HTML para PDF transforma uma página web dinâmica em um documento fixo.

Casos comuns:

• Salvar artigos de páginas web
• Gerar faturas/recibos online
• Exportar relatórios
• Criar e-books

Métodos de conversão de HTML para PDF

Impressão do navegador

O método mais simples: no navegador, Ctrl+P, destino escolha "Salvar como PDF". O motor de renderização do navegador converte a página diretamente em PDF.

Vantagens: gratuito, bom suporte a CSS. Desvantagens: operação manual, não adequado para lotes; elementos interativos da página podem interferir.

Ferramenta online

Use a ferramenta HTML para PDF:

1. Insira a URL da página ou cole o HTML
2. A ferramenta renderiza e converte
3. Baixe o PDF

Processado no navegador, conteúdo não é enviado.

Bibliotecas de programação

Para cenários de desenvolvimento, use bibliotecas:

• JavaScript: Puppeteer (Chrome headless), jsPDF
• Python: pdfkit, WeasyPrint
• Servidor: wkhtmltopdf

Tratamento de estilos CSS

Nível de suporte a CSS

Diferentes motores de conversão têm suporte diferente a CSS:

• Motor do navegador (Chrome): suporte mais completo, flex e grid funcionam
• wkhtmltopdf: baseado em WebKit antigo, não suporta CSS novo
• WeasyPrint: suporta a maior parte do CSS 2.1, parte do CSS 3

Antes de converter para PDF, confirme os recursos CSS suportados pelo motor.

CSS exclusivo para impressão

Use @media print para escrever estilos exclusivos de impressão:

@media print {
  .no-print { display: none; }  /* Ocultar elementos que não devem ser impressos */
  body { font-size: 12pt; }     /* Para impressão usar pt, não px */
  a { text-decoration: none; }  /* Remover sublinhado dos links */
}

Ocultar elementos interativos

Navegação, botões e anúncios na página não fazem sentido no PDF. Use @media print para ocultar:

@media print {
  nav, footer, .ad, .sidebar { display: none; }
}

Tratamento de cores

• Tela usa RGB, impressão PDF usa CMYK
• Cor de fundo não é impressa por padrão, para forçar a impressão defina -webkit-print-color-adjust: exact
• Fundo escuro consome muita tinta no PDF, considere mudar para cores claras

Controle de paginação

Quebra de página

CSS controla a paginação:

h1 { page-break-before: always; }  /* Quebra de página antes do título */
table { page-break-inside: avoid; } /* Tabela não deve ser cortada */
img { page-break-inside: avoid; }   /* Imagem não deve ser cortada */

Propriedades de paginação

• page-break-before: quebra de página antes do elemento
• page-break-after: quebra de página depois do elemento
• page-break-inside: não quebrar dentro do elemento

Evitar linhas órfãs e viúvas

p { orphans: 3; widows: 3; }  /* Pelo menos 3 linhas no final/início do parágrafo */

Cabeçalho e rodapé

Impressão do navegador

Na caixa de diálogo de impressão do navegador, defina cabeçalho e rodapé (número de página, título, URL). Mas os estilos são limitados.

Geração por biblioteca

Bibliotecas como Puppeteer podem personalizar cabeçalho e rodapé:

const pdf = await page.pdf({
  displayHeaderFooter: true,
  headerTemplate: '<div style="font-size:9pt;">Título do relatório</div>',
  footerTemplate: '<div>Página <span class="pageNumber"></span></div>',
  margin: { top: '60px', bottom: '60px' }
});

Tratamento de imagens

Caminho das imagens

No HTML, imagens usam caminho absoluto ou base64:

• Caminho absoluto: <img src="https://example.com/img.png">
• base64: <img src="data:image/png;base64,...">
• Caminho relativo: pode não ser encontrado ao converter para PDF, use caminho absoluto ou base64

Incorporação base64

Pequenas imagens usam base64 incorporado, evitando problemas de caminho:

<img src="data:image/png;base64,iVBORw0KGgo...">

Imagens grandes em base64 aumentam o tamanho do HTML, use com moderação.

Clareza de imagens

• Use imagens em alta resolução
• Não amplie além do tamanho original
• Imagens vetoriais (SVG) ficam mais nítidas no PDF

Tratamento de fontes

Carregamento de fontes

Páginas web usam Web Font (Google Fonts, etc.), ao converter para PDF as fontes devem estar totalmente carregadas. Ao usar bibliotecas, certifique-se de que as fontes estejam carregadas antes de converter.

Incorporação de fontes

O PDF deve incorporar fontes para exibir de forma consistente em qualquer dispositivo. Ferramentas de conversão geralmente incorporam automaticamente.

Fontes comuns

Use fontes comuns (Arial, Times New Roman, etc.) para evitar problemas de fonte.

Converter com DocsAll

Ferramenta HTML para PDF:

1. Insira a URL da página ou cole o código HTML
2. A ferramenta renderiza a página web
3. Converte para PDF
4. Baixe

Processado no navegador, conteúdo não é enviado ao servidor.

Perguntas frequentes

Estilos perdidos

• CSS não carregado (caminho do CSS externo incorreto)
• Usou recurso CSS não suportado pelo motor
• Solução: use CSS inline, use recursos CSS suportados

Paginação corta conteúdo

• Não configurou controle de paginação
• Solução: adicione page-break-inside: avoid

Imagens não exibidas

• Caminho incorreto
• Restrição de mesma origem
• Solução: use caminho absoluto ou base64

Caracteres incorretos

• Fonte não suporta os caracteres
• Codificação não é UTF-8
• Solução: use fonte com suporte adequado, declare codificação UTF-8 no HTML

Cor de fundo não impressa

• Navegador não imprime fundo por padrão
• Solução: CSS defina -webkit-print-color-adjust: exact, ou marque "gráficos de fundo" na caixa de diálogo de impressão

Página muito larga

• Largura da página web excede a página PDF
• Solução: ajuste a largura no CSS, ou troque para papel paisagem

Resumo

A conversão de HTML para PDF tem como ponto central o tratamento de estilos CSS e o controle de paginação. Use @media print para estilos de impressão, oculte elementos interativos. Controle a paginação com propriedades page-break. Use caminho absoluto ou base64 para imagens. A ferramenta HTML para PDF do DocsAll roda no navegador, conteúdo não sai do seu dispositivo.