HTML Convertido para PDF com Estilos Faltando — Diagnóstico e Correção

A conversão de HTML para PDF processa o HTML da mesma forma que um navegador, mas com algumas diferenças importantes: **CSS externo não carregado**: Se o HTML referencia um arquivo CSS com URL relativa ('../styles.css') ou URL absoluta de servidor ('https://exemplo.com/styles.css'), a ferramenta de conversão pode não ter acesso a esse arquivo — resultando em HTML sem estilo. **Fontes da web não disponíveis**: Google Fonts, Adobe Fonts e outras fontes carregadas de URLs externas podem não ser baixadas durante a conversão. O resultado é texto em fonte padrão do sistema. **Imagens com URL relativa**: Imagens referenciadas como './img/logo.png' não são encontradas pela ferramenta de conversão que não tem contexto de qual é o diretório base. **CSS com media queries para impressão**: Alguns CSS têm regras '@media print' que alteram o layout para impressão — a ferramenta de conversão usa o CSS de impressão, que pode ser diferente do CSS de tela. **JavaScript que gera estilos dinamicamente**: Componentes React, Vue, Angular e similares precisam ser renderizados antes de converter. HTML estático não tem os estilos injetados dinamicamente pelo JavaScript. **Propriedades CSS não suportadas**: A engine de renderização da ferramenta pode não suportar todas as propriedades CSS modernas (algumas variáveis CSS, certos seletores avançados, etc.).

Siga este processo de diagnóstico para identificar e resolver o problema.

1. 1Inspecione o HTML de origem. Verifique como o CSS está incluído: está no arquivo HTML mesmo (inline ou tag <style>) ou em arquivo externo (<link>)? CSS externo precisa de tratamento especial para a conversão.
2. 2Para CSS externo: abra o arquivo HTML em um editor de texto e copie o conteúdo do arquivo CSS para dentro do HTML usando a tag <style>. Isso elimina a dependência de arquivo externo e garante que os estilos estejam presentes na conversão.
3. 3Para fontes da web: baixe os arquivos de fonte (.woff2, .ttf) e inclua-os diretamente no HTML usando @font-face com base64. Alternativamente, substitua por fontes seguras do sistema (Arial, Georgia, Times New Roman) que funcionam sem internet.
4. 4Para imagens: converta as imagens para base64 e insira-as inline no HTML. Em vez de <img src='logo.png'>, use <img src='data:image/png;base64,iVBORw...'/>. Isso elimina a dependência de arquivos externos.
5. 5Para conteúdo gerado por JavaScript: renderize a página no navegador (Chrome, Firefox), depois use 'Salvar como > Página web, completa' para obter o HTML com todos os estilos e scripts já executados. Use esse HTML salvo para converter.
6. 6Após as correções, converta o HTML usando o LazyPDF e verifique o resultado. Se ainda faltar algum estilo específico, inspecione o CSS buscando propriedades que possam não ser suportadas e substitua por equivalentes mais simples.

Para garantir que estilos sempre apareçam na conversão, use CSS inline nos elementos principais: **Exemplo de recibo com CSS inline confiável**: ```html <div style="font-family: Arial, sans-serif; margin: 20px; color: #333;"> <h1 style="color: #1a73e8; border-bottom: 2px solid #1a73e8; padding-bottom: 10px;"> Recibo de Pagamento </h1> <table style="width: 100%; border-collapse: collapse; margin-top: 20px;"> <tr style="background-color: #f5f5f5;"> <td style="padding: 8px; border: 1px solid #ddd;">Descrição</td> <td style="padding: 8px; border: 1px solid #ddd;">Valor</td> </tr> </table> </div> ``` **Vantagens do CSS inline**: - Não depende de arquivos externos - Funciona em qualquer ferramenta de conversão - Mais portátil entre diferentes sistemas **Desvantagens**: - HTML mais verboso e difícil de manter - Sem reutilização de estilos **Abordagem híbrida recomendada**: Mantenha o CSS em um arquivo separado para desenvolvimento, mas use uma ferramenta (como 'juice' npm package ou premailer) para fazer o 'inlining' automático dos estilos antes de converter para PDF. Isso combina a organização do desenvolvimento com a confiabilidade do inline.

Otimize o CSS do seu HTML especificamente para a conversão PDF: **Use @media print para ajustes de PDF**: ```css @media print { /* Remove navegação e elementos não necessários */ nav, header.site-header, .sidebar { display: none; } /* Garante que imagens não quebram entre páginas */ img { page-break-inside: avoid; } /* Define tamanho de página */ @page { size: A4; margin: 2cm; } /* Garante que tabelas mostram cabeçalho em cada página */ thead { display: table-header-group; } /* Evita quebra de página em meio a elementos */ h1, h2, h3 { page-break-after: avoid; } } ``` **Cores e fundos**: Por padrão, a maioria das ferramentas não imprime cores de fundo para economizar tinta. Para garantir fundos coloridos no PDF, use `print-color-adjust: exact;` ou `-webkit-print-color-adjust: exact;` no CSS. **Fontes para documentos financeiros**: Para recibos, notas e documentos fiscais, use sempre fontes seguras (Arial, Helvetica, Times New Roman, Georgia) — garantem aparência consistente em qualquer sistema. **Unidades para PDF**: Prefira unidades absolutas (mm, cm, pt) em vez de relativas (em, %) para tamanhos que precisam ser exatos no PDF — como margens de boletos bancários.