Conversor gratuito de HTML para PDF

Sobre a conversão HTML → PDF

PDF começou como o projeto «Camelot» de John Warnock na Adobe em 1991, uma proposta interna para criar um «formato de arquivo comum capaz de capturar documentos de qualquer aplicativo, enviar versões eletrônicas desses documentos para qualquer lugar e visualizá-los e imprimi-los em qualquer máquina». Warnock foi cofundador da Adobe e inventor (com Charles Geschke) do PostScript; o objetivo do Camelot era pegar as garantias de fidelidade de impressão do PostScript e fazê-las funcionar tanto na tela quanto no papel. Acrobat 1.0 e PDF 1.0 foram lançados em junho de 1993, com o primeiro leitor Acrobat comercial a 50 $. PDF foi um formato proprietário controlado pela Adobe por quinze anos; a Adobe liberou a spec à ISO em 2008 como ISO 32000-1:2008 (PDF 1.7 publicado como padrão aberto); o maior PDF 2.0 (ISO 32000-2) chegou em 2017 com revisões até 2020. A Adobe renunciou aos seus direitos de patente restantes em abril de 2023, tornando o PDF totalmente livre de patentes no mundo. PDF é agora o formato universal de documento portátil, cada sistema operacional o lê nativamente, cada impressora o entende, cada sistema legal o aceita. Todo o edifício repousa sobre layout de posição fixa no estilo PostScript: cada elemento numa página PDF tem uma posição absoluta (x, y), alinhada à linha base do sistema de coordenadas da página, com texto codificado como referências de fonte + glifos e gráficos como comandos de caminho.

O descompasso básico entre HTML e PDF é o que torna a conversão HTML-para-PDF mais difícil do que parece. HTML é baseado em reflow, o conteúdo se adapta ao viewport, parágrafos se reformatam ao redimensionar, o layout muda quando o usuário dá zoom. PDF é de layout fixo, cada elemento está posicionado absolutamente, os limites de página são explícitos, nenhum reflow acontece. Converter de um para outro força uma série de decisões difíceis: como cortar páginas longas, onde as fontes incorporadas vivem no PDF resultante, como gráficos vetoriais são preservados, se os links continuam clicáveis. Não há resposta objetivamente certa para a maioria delas, o comportamento correto depende do caso de uso.

Duas abordagens JavaScript: raster vs vetor

A conversão HTML-para-PDF baseada em navegador tem duas arquiteturas. html2pdf.js (Erik Koopmans, usado por esta ferramenta) envolve duas bibliotecas subjacentes, html2canvas (que renderiza um elemento HTML para uma imagem canvas lendo o layout do DOM e redesenhando) e jsPDF (que constrói um PDF a partir de primitivas). O pipeline: HTML → imagem canvas → imagem incorporada no PDF. O resultado é preciso a pixel, o que você vê na pré-visualização é o que obtém no PDF, mas apenas raster: o texto no PDF é uma imagem, não texto selecionável. Você não pode buscar palavras dentro do PDF, não pode copiar e colar dele, leitores de tela não conseguem lê-lo. Para relatórios, certificados, faturas e documentos pontuais isso é aceitável; para documentos onde o texto precisa ser pesquisável ou acessível, isso é uma limitação significativa. A arquitetura alternativa usa jsPDF diretamente com primitivas de renderização de texto (doc.text(), doc.line(), doc.image()), construindo o PDF do zero com texto selecionável e gráficos vetoriais. Isso exige escrever código conversor para cada elemento HTML que você quer suportar, mas produz um PDF «de verdade» que é pesquisável e acessível. O trade-off: html2pdf.js é uma linha de código; a abordagem jsPDF-direto é um projeto de engenharia substancial. Esta ferramenta prioriza facilidade de uso (html2pdf.js) sobre selecionabilidade do texto, esteja ciente do trade-off ao decidir se a saída atende suas necessidades.

Alternativas do lado servidor, quando o lado navegador não basta

wkhtmltopdf foi a ferramenta de linha de comando HTML-para-PDF open-source de longa data, um renderer baseado em WebKit que convertia HTML para PDF no servidor. Usado em incontáveis pipelines CI, aplicações empresariais e serviços de geração PDF. O projeto wkhtmltopdf foi arquivado em 2023 (o repositório GitHub agora está em modo somente-leitura); não deveria ser a recomendação para novas aplicações, embora bilhões de PDFs existentes tenham sido gerados com ele. Puppeteer (Google, Chrome headless desde 2017) é o padrão industrial moderno para HTML-para-PDF do lado servidor. O page.pdf() do Puppeteer usa o pipeline completo de geração PDF do Chromium, texto selecionável, fontes incorporadas, gráficos vetoriais, hiperlinks todos funcionam corretamente porque o Chromium tem um backend PDF real. Playwright (Microsoft, 2020) é o equivalente cross-browser (Chromium, Firefox, WebKit) com a mesma capacidade de geração PDF. Prince (comercial, 495 $/servidor) é a melhor implementação de CSS Paged Media, suporta layouts multi-coluna, cabeçalhos/rodapés correntes, páginas nomeadas, notas de rodapé, recursos OpenType. WeasyPrint (open source, Python) é a alternativa cross-plataforma com recursos similares. Paged.js é um polyfill que traz recursos de CSS Paged Media para a geração PDF baseada em navegador. O «Salvar como PDF» integrado do navegador (Arquivo → Imprimir → Salvar como PDF) é a opção mais barata de todas, é gratuita, já instalada, suporta CSS Paged Media razoavelmente bem e produz saída PDF com texto selecionável. Para conversões pontuais, essa é frequentemente a resposta certa em vez de uma ferramenta de terceiros.

CSS Paged Media, como a impressão-a-partir-de-CSS realmente funciona

O CSS Paged Media Module do W3C define um conjunto de recursos CSS especificamente para saída paginada: regras @page para controlar tamanho de página, margens e orientação; @page :left / @page :right para margens assimétricas em páginas esquerda e direita de um livro; @page :first para tratamento especial da primeira página; margin boxes (@top-center, @bottom-right etc.) para cabeçalhos e rodapés correntes; page-break-before / page-break-after / page-break-inside para controlar onde as páginas quebram (com a sintaxe moderna break-before: page / break-after: page / break-inside: avoid); orphans e widows para controle de quebra de parágrafo. Navegadores implementam vários subconjuntos de CSS Paged Media em seu pipeline de impressão. Prince e WeasyPrint implementam a spec completa; o page.pdf() do Chrome cobre a maior parte; html2pdf.js (esta ferramenta) suporta regras page-break-* básicas mas pula os recursos mais elaborados de margin-box e páginas nomeadas. Para documentos que precisam de layout de qualidade livro (páginas de título, inícios de capítulo, cabeçalhos correntes, notas de rodapé), use Prince ou WeasyPrint; para o caso típico «salve este relatório como PDF», html2pdf.js é suficiente.

Casos de uso comuns :

• Faturas e recibos. O caso de negócio mais comum, um template HTML estruturado preenchido com dados de pedido, exportado como PDF para envio por e-mail ou arquivamento. A limitação texto-não-selecionável raramente importa porque o destinatário não precisa pesquisar no conteúdo de uma única fatura.
• Relatórios e documentos. Relatórios trimestrais de negócio, entregáveis de projeto, documentos de status internos, gerados a partir de um sistema de templates, exportados como PDF para distribuição.
• Certificados. Certificados de conclusão de curso, certificados de participação em conferências, badges de conquista, tipicamente uma única página com estilo HTML/CSS, exportada como PDF pontual.
• Currículos e CVs. Candidatos construindo seu currículo em um template web (export do Notion, builder personalizado) e exportando como PDF para submissão. A selecionabilidade do texto importa aqui porque software de recrutamento (ATS) frequentemente faz extração de palavras-chave de PDFs de currículo.
• Ingressos e confirmações. Ingressos de show, cartões de embarque, confirmações de hotel, exportados de fluxos web de reserva para armazenamento offline ou impressão.
• Arquivamento de conteúdo web. Salvar um artigo, post de blog ou página de documentação como PDF de formato fixo para referência offline ou armazenamento de longo prazo.
• E-mail-para-PDF. Converter e-mails HTML (newsletters, anúncios) para PDF para encaminhamento ou arquivos de conformidade.

Escopo honesto: o que esta ferramenta faz e não faz

Esta ferramenta usa html2pdf.js v0.10.1 (o build empacotado com html2canvas + jsPDF) para renderizar HTML no seu navegador e produzir um download PDF. O PDF resultante é preciso a pixel em relação à pré-visualização, o que você vê é o que obtém, mas o texto é renderizado como imagem raster, não texto selecionável. Suporta tamanhos de página A4, Letter, A3 e A5, orientações retrato e paisagem, margens configuráveis, nome de arquivo personalizado e regras CSS page-break-* básicas para controle de quebra de página. O que esta ferramenta não faz, e onde você deveria buscar uma alternativa: texto selecionável / pesquisável no PDF (use Puppeteer do lado servidor, ou «Salvar como PDF» do navegador); layout de qualidade livro com cabeçalhos correntes, rodapés, páginas nomeadas, notas de rodapé (use Prince ou WeasyPrint do lado servidor); execução JavaScript no HTML renderizado (o conversor passa o HTML pelo html2canvas que não executa scripts dentro do conteúdo renderizado); conteúdo animado (PDF é estático); media queries que dependem de contextos de impressão (a renderização acontece em contexto de tela). Para necessidades cotidianas «faça um PDF a partir deste HTML», html2pdf.js é bom o suficiente; para pipelines de qualidade produção que precisam de texto PDF real e saída acessível, Puppeteer do lado servidor é o padrão moderno.

Privacidade: por que só-navegador importa aqui

Geração de PDF é um negócio cloud-SaaS comum, serviços como DocRaptor, PDFShift, PDFCrowd, API2PDF cobram por PDF gerado, geralmente porque estão rodando Puppeteer headless em uma fazenda de servidores e absorvendo o custo da renderização acelerada por GPU. O trade-off é que o HTML que você envia a esses serviços é processado na infraestrutura deles: faturas contêm informação de cliente, relatórios contêm dados de negócio, certificados contêm nomes pessoais, currículos contêm tudo. O que quer que você gere, o serviço terceiro vê. Esta ferramenta roda inteiramente no seu navegador via html2pdf.js, verifique na aba Network do DevTools ao clicar Gerar (a única requisição saindo é para buscar a biblioteca html2pdf.js do CDN; uma vez carregada, sem mais requisições). Coloque a página offline (modo avião) após a biblioteca carregar e o conversor continua funcionando. Seguro para HTML contendo nomes de clientes, dados financeiros, templates internos ou qualquer conteúdo que você não queira ver copiado no disco rígido de um desconhecido.

Perguntas frequentes

Quais recursos HTML/CSS são suportados ?

O html2pdf suporta HTML e CSS padrão, incluindo layouts, fontes, cores, imagens e tabelas. Recursos avançados (animações, JavaScript, media queries) são limitados. Para melhores resultados, use CSS inline ou tags <style> em vez de folhas externas.

Como incluir imagens no meu HTML ?

Use URIs de dados para as imagens ou garanta que os URLs de imagens externas sejam acessíveis e compatíveis com CORS. Imagens codificadas em Base64 funcionam de forma confiável. Exemplo : <img src="data:image/png;base64,…" />

Por que o texto não é selecionável no PDF?

Porque html2pdf.js renderiza o HTML para uma imagem canvas primeiro, depois incorpora a imagem no PDF. O «texto» do PDF é na verdade uma imagem raster do texto, não glifos de texto reais. Esse é o trade-off pela fidelidade visual: o PDF parece exatamente como a pré-visualização do navegador, mas você não pode pesquisar, copiar ou usar um leitor de tela nele. Para texto PDF realmente selecionável, as alternativas são: usar o «Salvar como PDF» integrado do navegador (Arquivo → Imprimir → Salvar como PDF, produz texto selecionável e é grátis); usar uma ferramenta do lado servidor como o page.pdf() do Puppeteer que tem o pipeline completo de geração PDF do Chromium; ou escrever JavaScript que chame as primitivas doc.text() do jsPDF diretamente (substancialmente mais trabalho).

Por que minha pré-visualização é diferente do PDF ?

A pré-visualização mostra a renderização do seu HTML no navegador. Alguns recursos CSS aparecem de forma diferente em PDF. Teste os layouts complexos antes de gerar o PDF final e ajuste margens ou tamanhos de fonte, se necessário.

Posso adicionar quebras de página no meu HTML ?

Sim, use as quebras de página CSS : adicione page-break-before: always; ou page-break-after: always; em qualquer elemento. Em CSS3, use break-before: page; ou break-after: page; para melhor compatibilidade.

Meu HTML é enviado a um servidor?

Não. O HTML que você cola e o PDF gerado ambos ficam no seu navegador. A única requisição de rede é para a própria biblioteca html2pdf.js carregada de um CDN público no carregamento de página; uma vez carregada, sem mais requisições saindo. Verifique na aba Network do DevTools ao clicar Gerar, ou coloque a página offline (modo avião) após a biblioteca carregar e o conversor continua funcionando. Seguro para HTML contendo dados de cliente, detalhes financeiros, templates de negócio internos, ou qualquer conteúdo que você não queira que um serviço PDF terceiro veja.