Como converter um arquivo HTML em PDF com o estilo intacto
Pela equipe do FreePDF ·
Mandar um arquivo .html para alguém é sempre meio arriscado. Ele fica certo no computador que o gerou e chega do outro lado sem a folha de estilo, ou abre num navegador que diagrama de outro jeito, ou é bloqueado como anexo no e-mail. Converter para PDF fixa a página: um arquivo só, o mesmo layout em qualquer lugar, e imprime igual ao que aparece na tela.
O que vai junto e o que não vai
Envie o arquivo .html ou .htm e ele é renderizado em PDF do mesmo modo que um navegador faria ao preparar a impressão. Vale saber três coisas antes de converter:
- O CSS que está no arquivo é aplicado. Tudo que estiver num bloco
<style>ou num atributostyle=vai junto: fontes, cores, bordas, tabelas, fundos. - JavaScript não é executado. A página é renderizada como está no arquivo. Se um gráfico ou uma tabela é desenhado por um script no carregamento, o PDF recebe o contêiner vazio de onde ele partiu.
- Caminhos relativos não resolvem. Um arquivo enviado não tem endereço em relação ao qual ser relativo, então
<img src="images/logo.png">ou<link href="style.css">não apontam para nada. URLs absolutas comhttps://são buscadas normalmente.
A solução para o último caso é uma página autossuficiente: cole o CSS num bloco <style> e use URLs completas nas imagens ou embuta-as como URI data:. A maioria das ferramentas que geram relatórios em HTML — e o “Salvar página como → arquivo único” do seu navegador — já faz isso.
Papel e margens você controla pelo CSS
Como a renderização acontece como saída de impressão, o CSS de impressão é respeitado. Se é você que gera o HTML, poucas regras já resolvem bastante:
@page { size: A4; margin: 20mm; }define o tamanho do papel e as margens. TroqueA4porLetterse for esse o seu papel.break-before: pagenum título faz cada seção começar numa folha nova.break-inside: avoidnuma tabela ou num cartão evita que ele seja cortado em duas páginas.- Regras dentro de
@media printvalem, então menu de navegação, banners e tudo que você esconderia de uma impressora ficam fora do PDF.
Quando a caixa de impressão do navegador é melhor
Vale dizer sem rodeios, porque muitas vezes é a resposta certa: se o que você quer é salvar uma página da web ao vivo em PDF, abra a página e imprima em PDF. O navegador já tem a página carregada com as imagens, os scripts executados e você logado, então ele captura coisas que um arquivo enviado simplesmente não contém.
Converter o arquivo aqui é o melhor caminho quando você tem um .html autossuficiente no disco — uma fatura que veio por e-mail, um relatório escrito por um script, a exportação de alguma ferramenta, um recibo salvo — e quer um PDF limpo, sem os cabeçalhos, rodapés e números de página que o próprio navegador estampa nas bordas. Também é reproduzível: o mesmo arquivo gera o mesmo PDF sempre, em qualquer máquina, o que uma caixa de impressão cheia de ajustes diferentes em cada computador não faz.
E se o documento é para escrever, não para converter, o Markdown pula esse problema inteiro: não há CSS para gerenciar nem imagens para caçar.
Perguntas comuns
Posso passar uma URL em vez de um arquivo?
Não — ele converte um arquivo que você envia. Salve a página primeiro (Ctrl+S / Cmd+S, escolhendo a opção de arquivo único se o seu navegador oferecer) e envie esse arquivo. Se a página fica atrás de um login, salvá-la você mesmo é de todo jeito a única forma de o conteúdo sair de lá.
Meu PDF saiu sem estilo. O que aconteceu?
Quase sempre é uma folha de estilo que mora em outro arquivo. O HTML referencia style.css, o envio foi só o HTML e não há nada para carregar. Abra o arquivo num editor de texto, jogue o CSS num bloco <style> dentro do <head> e converta de novo.