Guia de HTML para PDF e gerador de CSS de impressão
Como converter HTML em PDF: CSS de impressão, window.print() | We.Inc
Transforme HTML em um PDF limpo: salve pela janela de impressão, escreva CSS de impressão com @page e break-inside, chame window.print() ou renderize em um servidor. Com um gerador de CSS de impressão.
O jeito mais rápido de transformar uma página web em PDF é a própria janela de impressão do navegador: abra, escolha o destino PDF e salve. Para controlar a aparência desse PDF, adicione CSS de impressão com @media print e @page para o tamanho do papel e as margens. Para PDFs gerados automaticamente, renderize a página com um navegador headless como Puppeteer ou Playwright.
Formas de gerar um PDF a partir de HTML
Método
Onde roda
Texto selecionável
Melhor para
Janela de impressão, salvar como PDF
Qualquer navegador de desktop
Sim
Cópias avulsas de uma página
Botão com window.print()
O navegador do visitante
Sim
Faturas, recibos, ingressos
Puppeteer page.pdf()
Node.js controlando o Chrome
Sim
Relatórios automáticos em um servidor
Playwright page.pdf()
Um script Playwright controlando um navegador
Sim
PDFs automáticos dentro de uma estrutura de testes existente
O navegador do visitante
Não, a página vira uma imagem
Downloads rápidos no lado do cliente
jsPDF
O navegador do visitante
Sim, para o texto que você desenha
Montar um PDF a partir de dados no código
Todos os métodos desta página acabam pedindo a um motor de navegador que diagrame a página no papel, então um bom CSS de impressão melhora todos eles. Monte abaixo uma folha de estilos de impressão inicial e depois escolha o caminho de conversão que combina com quem aperta o botão: uma pessoa, a sua página ou um servidor.
Escolha o tamanho do papel, a orientação e a margem para a regra @page.
Marque os extras de que precisa: esconder a navegação, manter blocos juntos, imprimir os endereços dos links, manter as cores de fundo.
Copie o CSS para a sua folha de estilos; ele só se aplica na impressão.
Abra a pré-visualização de impressão no navegador e escolha o destino PDF para conferir o resultado.
Use a pré-visualização de impressão como bancada de testes. Ela se atualiza a cada mudança no CSS e não custa nada.
Esconda navegação, banners de cookies e barras laterais na impressão; ninguém consegue clicar neles no papel.
Mantenha tabelas, figuras e blocos de código inteiros com break-inside: avoid.
Os navegadores descartam as cores de fundo na impressão por padrão. print-color-adjust: exact pede que mantenham as suas, mas as configurações de impressão do visitante ainda prevalecem.
Use pt, mm ou in para tamanhos de impressão quando precisar de medidas físicas exatas.
Perguntas frequentes
Como salvo uma página web como PDF sem nenhuma ferramenta?
Abra a janela de impressão do navegador pelo menu ou pelo atalho de teclado e escolha a opção PDF na lista de destino ou de impressoras. O nome exato depende do navegador e do sistema operacional.
Como adiciono um botão Baixar PDF à minha página?
A versão mais simples e honesta é um botão que chama window.print(), que abre a mesma janela, onde o visitante pode salvar como PDF. Não precisa de biblioteca, mantém o texto selecionável e usa o seu CSS de impressão.
Como evito que uma tabela se divida entre duas páginas?
Adicione break-inside: avoid à tabela, ou às linhas se a tabela for longa. O antigo page-break-inside: avoid é tratado como alias, então continua funcionando em folhas de estilo mais antigas.
Posso definir o tamanho do papel pelo CSS?
Sim. @page { size: A4 portrait; margin: 15mm; } define o tamanho e as margens da caixa da página. O Puppeteer só usa isso quando preferCSSPageSize é true; caso contrário, quem decide é a própria opção format dele, Letter por padrão.
Por que o html2pdf.js gera PDFs borrados ou enormes?
O README dele explica que o conteúdo é renderizado como imagem e essa imagem é colocada no PDF, então o texto não é selecionável nem pesquisável e os arquivos ficam grandes. Use a impressão ou um navegador headless quando o texto importar.
O CSS de impressão é a base
Um bloco @media print permite reestilizar a página para o papel sem mexer no design de tela. Esconda o que não faz sentido no papel, alargue a coluna de conteúdo e defina um tamanho de fonte legível.
A regra @page controla a própria caixa da página: tamanho, margens e orientação, com :first, :left e :right para tratar páginas específicas de forma diferente. O MDN lista @page como Baseline newly available desde dezembro de 2024, com algumas partes ainda variando entre navegadores.
Quando renderizar em um servidor
Se os PDFs precisam ser gerados sem uma pessoa, como um relatório noturno ou uma fatura enviada por e-mail, rode um navegador headless. O page.pdf() do Puppeteer imprime com o media type print, aceita opções como format, margin e printBackground e pode salvar direto em um caminho de arquivo.
Renderizar no servidor dá o mesmo resultado toda vez, porque você controla a versão do navegador e as fontes. Também significa rodar e proteger esse navegador, então só assuma isso quando um botão de impressão não bastar.
Referência de CSS de impressão
Regras e propriedades que moldam as páginas impressas
CSS
Valores
Uso
@media print { }
Quaisquer regras
Estilos que valem só ao imprimir ou salvar em PDF
@page { size }
A5, A4, A3, B5, B4, letter, legal, ledger ou medidas; portrait ou landscape
Tamanho e orientação do papel
@page { margin }
Medidas
Margens de todas as páginas
@page :first
Pseudoclasse
Margens diferentes na primeira página
auto, avoid, avoid-page, avoid-column
Manter um bloco em uma só página
break-before / break-after
auto, avoid, page, left, right
Forçar ou impedir uma quebra em um bloco
economy, exact
Se o navegador pode descartar cores e fundos
Exemplos de impressão para copiar
Um botão de imprimir ou salvar como PDF
window.print() abre a janela de impressão e bloqueia a página até ela fechar. A classe mantém o próprio botão fora do papel.
Layout de fatura que começa cada fatura em uma nova página
break-after: page depois de cada fatura gera uma fatura por folha quando várias são impressas juntas.
Preparar a página logo antes de imprimir
beforeprint e afterprint disparam em volta da janela, o que é útil para expandir seções recolhidas.
PDF no servidor com Puppeteer
preferCSSPageSize faz o tamanho do seu @page prevalecer sobre a opção format; printBackground mantém os fundos.