O que o Conversor HTML para PDF faz
O Conversor HTML para PDF pega qualquer HTML que você tenha — markup colado, arquivo .html subido ou URL pública — e transforma num PDF baixável. A página é renderizada num canvas fora da tela com html2canvas, distribuída em páginas de PDF pelo jsPDF, e entregue como um único arquivo. Escolha A4 ou Letter, retrato ou paisagem, e uma margem. Tudo acontece no seu navegador. Nada é enviado.
Seja honesto sobre a troca. O html2canvas reimplementa um subconjunto de CSS em JavaScript — ele lê estilos computados do DOM e os pinta num canvas. Acerta o básico: cores, fontes, padding, bordas, fundos, posicionamento simples, flexbox básico. Tem dificuldade em casos de borda: layouts grid complicados, subgrid, alinhamento baseline, gaps em porcentagem dentro de containers flex, certos cálculos de layout com custom properties. Para saída pixel-perfect, o Imprimir → Salvar como PDF do seu navegador vence — usa o motor de renderização real. Nossa ferramenta é para o caso em que você tem HTML cru em mãos e quer um PDF sem abrir uma aba de navegador primeiro.
Como usar
O widget tem três modos de entrada. Escolha o que combina com sua situação.
- Escolha um modo. Colar HTML funciona para qualquer markup que você já tenha. Subir .html aceita um arquivo local. Da URL busca uma página pública (a maioria vai falhar por CORS — veja abaixo).
- Defina o tamanho da página (A4 ou Letter), orientação (retrato ou paisagem) e margem (0, 10, 20 ou 40 mm). Padrões são A4 / retrato / 20 mm.
- Clique em Converter para PDF. O HTML é renderizado num div oculto, o html2canvas captura em escala 2× para nitidez e o jsPDF distribui o resultado por quantas páginas forem necessárias.
- Clique em Baixar. O nome do arquivo é derivado da fonte: HTML colado →
webpage.pdf, arquivo subido → espelha o nome, URL → derivado do hostname (example.com→example-com.pdf).
Nada do seu HTML toca um servidor que controlamos. Modo Colar e modo Subir são inteiramente locais — abra a aba de rede do navegador durante a conversão e verá zero requisições de saída. O modo URL faz exatamente uma requisição: seu navegador busca a URL que você digitou, e a resposta fica na memória do navegador.
Os três modos de entrada e quando usar cada um
Cada modo resolve um problema diferente. Escolher o certo na largada economiza tempo.
| Modo | O que aceita | Funciona em | Melhor para |
|---|---|---|---|
| Colar HTML | Qualquer markup na textarea | Tudo (o markup já está local) | Templates de e-mail, snippets de CMS, relatórios exportados, qualquer coisa que dê para copiar e colar |
| Subir .html | Um arquivo .html local | Tudo (o arquivo já está local) | Relatórios HTML standalone, faturas geradas, notebooks exportados |
| Da URL | Uma URL pública com CORS permissivo | Cerca de 5% das URLs públicas (endpoints com CORS permitido, ambientes de dev, seus próprios sites) | Fetches rápidos de APIs que retornam HTML, seus próprios sites onde você controla os headers |
Se você tentou o modo URL e deu erro, esbarrou em Cross-Origin Resource Sharing — uma feature de segurança do navegador, não um bug que conseguimos patchear. A solução alternativa é universal: abra a URL numa aba normal, clique direito → Ver Código-Fonte da Página (ou DevTools → Elements → Copy outerHTML na tag <html> se a página é renderizada por JS), e cole no modo Colar HTML. O HTML agora é local, o CORS não se aplica mais, e a conversão roda.
Um exemplo prático com números reais
Suponha que você tem um template HTML de e-mail — um anúncio de marketing, 1.200 palavras de corpo, duas imagens de cabeçalho, um botão CTA, rodapé com links de redes sociais. Cerca de 18 KB de HTML e 240 KB de imagens inline, tudo num único arquivo .html com um único bloco <style> no topo.
Em A4 / retrato / margem 20mm: a conversão leva 2,5 segundos. A saída é 1,3 MB em 3 páginas. A imagem hero está nítida, o tipo do corpo lê limpo, o botão CTA mantém forma e cor, os logos do rodapé renderizam no tamanho certo. A única diferença visível do código fonte: o estado hover no CTA não foi capturado (estamos renderizando o DOM em repouso, sem simulação de hover), e o flex-wrap do rodapé colocou um ícone numa segunda linha porque o html2canvas mediu o gap do flex ligeiramente diferente de um navegador real.
Em A4 / paisagem / margem 10mm: mesmo conteúdo, 2 páginas em vez de 3, linhas ligeiramente mais largas. 1,1 MB. Letter / retrato / 20mm: 3 páginas, 1,3 MB, linhas quebram nas mesmas palavras que o A4 porque a coluna tem largura quase idêntica.
Agora inverta a entrada: um dashboard single-page-app renderizado com React, servido de localhost:3000. O modo URL busca o HTML de bootstrap e pula todo componente que o React deveria montar — você ganha um PDF em branco com o spinner de loading. O movimento certo: abra o app numa aba, deixe renderizar, copie outerHTML do DOM renderizado, cole no modo Colar HTML. O PDF agora bate com o que estava na tela.
Como isto se compara ao Adobe Acrobat, SmallPDF, iLovePDF
Os serviços HTML-para-PDF de nome grande — Adobe Acrobat web, URL-para-PDF do SmallPDF, HTML-para-PDF do iLovePDF, PDFCrowd, DocRaptor — todos rodam server-side, que é a arquitetura certa para fidelidade mas errada para privacidade e velocidade.
Esses serviços geralmente dirigem uma instância de Chromium headless no servidor deles. Você dá uma URL ou HTML; eles inicializam um navegador, navegam até seu conteúdo, rodam o JS, esperam fontes e imagens carregarem, depois acionam a API de impressão do Chrome. A saída é pixel-perfect porque saiu de um navegador real. Os pontos negativos: seu HTML e quaisquer dados dentro dele viajam para a infraestrutura deles e ficam nos logs deles; você espera na fila com os jobs de renderização de todo mundo; geralmente há uma cota grátis diária e um nível pago que começa em US$ 9-15/mês; e a maioria exige conta antes do segundo arquivo.
Fazemos menos, no seu navegador, de graça. A troca é honesta: CSS complexo pode renderizar imperfeitamente, JS não será executado (não rodamos scripts no container de renderização fora da tela), web fonts que precisam de fetch com CORS permitido podem cair para fallback de padrões, e páginas muito longas podem produzir saída grande. Para um template de e-mail, um relatório exportado, um preview de CMS ou uma fatura gerada — trabalhos comuns de HTML-para-PDF — nossa ferramenta é a escolha certa. Para um site de marketing polido que você quer arquivar bit a bit, use Imprimir → Salvar como PDF do Chrome, ou um dos serviços server-side se vale a pena programar.
O que o html2canvas consegue e o que não consegue
O html2canvas é o motor fazendo o trabalho visual, e saber seus limites poupa dor de cabeça.
Funciona bem:
- Propriedades CSS padrão. Color, background, font, padding, margin, border, border-radius, box-shadow, opacity — todos renderizam igual a um navegador real.
- Estilos inline e tags <style> no mesmo documento. Se seu CSS está dentro do HTML que você cola, funciona. Sempre coloque seu CSS inline num único bloco <style> no topo para melhores resultados.
- Flexbox básico. Layouts row e column, alinhamento simples, gap, justify-content e align-items básicos — funcionam para a maioria absoluta dos layouts.
- Imagens inline e em bloco. JPEGs e PNGs embutidos no HTML ou referenciados por URL absoluta de servidores com CORS permitido renderizam corretamente.
Funciona imperfeitamente:
- CSS Grid. Grids simples com tracks explícitos geralmente renderizam. Auto-placement, subgrid, áreas nomeadas e grid-template-areas frequentemente não.
- Custom properties (variáveis CSS). Honradas quando a propriedade é lida diretamente, mas algumas cadeias de valor computado quebram.
- Casos de borda de flexbox. flex-wrap com filhos de altura mista, alinhamento baseline, gaps em porcentagem, itens com flex-basis: 0% — esses às vezes fazem layout com dimensões ligeiramente erradas.
- Web fonts carregadas de domínios externos. Se os headers CORS da fonte permitem leituras cross-origin, ela renderiza; caso contrário caímos para uma serifa do sistema.
Não funciona:
- JavaScript. Não executamos scripts no container de renderização. Se seu HTML depende de JS para injetar conteúdo (gráficos, SPAs, qualquer coisa dinâmica), capture o DOM renderizado no DevTools primeiro e cole.
- iframes. O conteúdo de um iframe vive num contexto de documento diferente que o html2canvas não consegue ler.
- Estados :hover, :focus, :active. O DOM é capturado em repouso. Efeitos de hover não são simulados.
- Animações. Um único frame é capturado. Transições CSS e animações keyframe não aparecem.
Quando o Imprimir → Salvar como PDF do navegador é a resposta certa
Chrome, Firefox, Safari e Edge todos têm uma opção Salvar como PDF embutida na caixa de diálogo de impressão. Usa o motor de renderização real do navegador (Blink, Gecko, WebKit), o que significa fidelidade perfeita em grid, flexbox, web fonts e conteúdo renderizado por JS. Também lida com seus cookies de auth — páginas atrás de login renderizam corretamente porque a caixa de impressão está no mesmo contexto do navegador que a página.
O detalhe: exige que você abra a página numa aba e passe pela caixa de diálogo de impressão. Está ok para um ou dois PDFs. É tedioso para jobs em lote ou para HTML que você ganhou via API ou exportação de CMS. Nossa ferramenta é para isso — HTML cru em mãos, quer um PDF, não quer abrir uma aba. O Imprimir → Salvar como PDF do navegador é a ferramenta certa para todo o resto.
A árvore de decisão: pixel-perfect, página aberta numa aba → Imprimir → Salvar como PDF. HTML cru em mãos, saída "boa o suficiente", sem upload → esta ferramenta. Pixel-perfect e você precisa scriptar em centenas de URLs → Chromium headless via Puppeteer ou um dos serviços pagos.
Ferramentas PDF relacionadas
O Conversor HTML para PDF combina com algumas outras no caminho até um documento finalizado:
- Imagem para PDF — agrupe uma pasta de imagens num único PDF. Frequentemente a ferramenta certa se seu "HTML" é na verdade uma pilha de screenshots.
- Juntar PDFs — combine a saída HTML-para-PDF com outros PDFs (uma carta de apresentação, um apêndice, uma página assinada) num único arquivo.
- Comprimir PDF — se a saída ficou inesperadamente grande (páginas longas e muitas imagens podem chegar a 5-10 MB), passe pelo compressor.
- PDF para PNG — renderize cada página do PDF como imagem depois que tem o PDF em mãos.
- Word para PDF — se o que você tem na verdade é um .docx e parou aqui sem querer, este é o vizinho certo.
O Microapp envia cada ferramenta PDF para o lado do navegador. 10% de cada dólar de receita vai para caridade, do topo, auditado trimestralmente — as ferramentas têm que ganhar esses 10%, o que significa que têm que funcionar de verdade sem te enterrar em upsells.
Perguntas frequentes
Por que minha URL falha?
Cross-Origin Resource Sharing (CORS). Quando seu navegador busca uma URL via JavaScript de outro domínio, o servidor alvo tem que permitir explicitamente via headers de resposta. Quase nenhum site público faz isso. É uma feature de segurança do navegador, não algo que conseguimos contornar na página. O caminho confiável: abra a URL numa aba normal do navegador, ver código-fonte (ou clique direito → Ver Código-Fonte da Página), copie o HTML, cole no modo Colar HTML aqui. Isso pula o CORS por completo porque o HTML agora é local. Páginas que exigem login também não funcionam — precisam dos seus cookies de sessão, que nosso fetch não consegue pegar emprestado.
Preserva CSS?
A maior parte, sim — mas não tudo. O html2canvas lê estilos computados do DOM renderizado e pinta num canvas. Cor padrão, fonte, padding, borda, fundo e posicionamento básico funcionam todos. Estilos inline, tags <style> dentro do seu HTML e estilos aplicados via classes que alcançam sua folha de estilos participam todos. O detalhe: se seu HTML referencia folhas de estilo externas em outros domínios, podem ser bloqueadas por CORS igual ao fetch de URL acima — nesse caso a saída renderizada usa estilos padrão para essas regras. Para melhores resultados, coloque seu CSS inline num bloco <style> no topo do HTML que você cola.
E sobre flexbox e grid?
Flexbox: funciona para os casos comuns (layouts row/column, alinhamento básico). Casos de borda — flex-wrap com filhos de conteúdo misto, alinhamento baseline, gaps em porcentagem — às vezes renderizam com dimensões erradas. Grid: suporte parcial. Grids simples com tracks explícitos de linha/coluna geralmente funcionam; auto-placement, subgrid e áreas nomeadas frequentemente não. Custom properties de CSS (--my-var) são honradas quando lidas diretamente mas quebram alguns cálculos de layout. Se seu documento depende muito de layout moderno, use o Imprimir → Salvar como PDF do navegador (Chrome, Firefox, Safari todos suportam) — usa o motor de renderização real do navegador, não uma reimplementação em JS.
E o JavaScript?
Não executado. Nós não removemos nada, mas o html2canvas captura o DOM como ele existe quando entregamos — e não rodamos scripts no container de renderização fora da tela. Se seu HTML depende de JS para injetar conteúdo, rode esse JS numa aba normal de navegador primeiro, veja o código-fonte do DOM renderizado (DevTools → Elements → Copy outerHTML no <html>), e cole a versão pós-JS aqui. Gráficos, single-page apps, qualquer coisa que se constrói com JS — capture o DOM renderizado, depois converta.
Como isto se compara ao Imprimir → Salvar como PDF do navegador?
Imprimir → Salvar como PDF usa o motor de layout real do seu navegador (Blink no Chrome, WebKit no Safari, Gecko no Firefox), então acerta tudo — flexbox, grid, web fonts, conteúdo renderizado por JS, tipografia perfeita. O detalhe: exige que você abra a página numa aba primeiro e passe pela caixa de diálogo de impressão. Nossa ferramenta é para o caso em que você tem HTML cru (um template de e-mail que está testando, um relatório exportado, um snippet de um CMS) e quer um PDF sem abrir num navegador primeiro. Use Imprimir para fidelidade, use isto para velocidade e entrada de HTML cru amigável a automação.
Meu HTML realmente não é enviado?
Correto para Colar HTML e Subir .html — os dois rodam inteiramente no seu navegador, sem requisições de saída. Para Da URL há exatamente uma requisição de saída: seu navegador busca a URL que você digitou, e é só isso; o HTML buscado fica na memória e nunca chega aos nossos servidores. Confira na aba de rede do navegador. O PDF é montado localmente e baixado via blob URL.
Por que a saída está maior do que eu esperava?
Porque a página é rasterizada num canvas, depois recodificada como JPG quando entra no PDF. Uma página longa com muitas imagens pode facilmente produzir um PDF de vários MB mesmo a partir de alguns KB de HTML de origem. Se tamanho importa, passe o resultado pelo nosso Compressor de PDF — para saída pesada em imagem ele frequentemente reduz 50-70%.
Posso converter uma página protegida por senha ou atrás de login?
Do modo URL não — nosso fetch não tem acesso aos seus cookies de navegador ou headers de auth. Solução alternativa: abra a página na sua aba normal do navegador (onde você está logado), abra DevTools → Elements, clique direito na tag <html> → Copy → Copy outerHTML, depois cole em Colar HTML. Isso captura a página totalmente renderizada e autenticada incluindo qualquer DOM que o JS construiu após o login.