Markdown para PDF no Lado do Cliente: Do html2pdf.js à Impressão Nativa do Navegador

Converter Markdown para PDF no navegador parece simples, mas está cheio de armadilhas. Este artigo documenta as escolhas técnicas, a evolução da arquitetura e os detalhes de implementação por trás da exportação PDF do md-to.com.

A Primeira Tentativa: html2pdf.js

Inicialmente usamos html2pdf.js, que converte HTML para PDF via canvas. Mas encontramos problemas:

• Renderização baseada em imagem: O texto não era selecionável no PDF
• Paginação ruim: Conteúdo era cortado no meio de elementos
• Desempenho lento: Documentos grandes travavam o navegador

A Solução: Impressão Nativa do Navegador

Migramos para window.print() com CSS otimizado para impressão:

@media print {
  pre, code {
    break-inside: avoid;
  }
  h1, h2, h3, h4, h5, h6 {
    break-after: avoid;
  }
  table {
    break-inside: avoid;
  }
}

Benefícios

Característica	html2pdf.js	Impressão Nativa
Texto selecionável	❌	✅
Qualidade vetorial	❌	✅
Paginação CSS	❌	✅
Desempenho	Lento	Rápido

Implementação com Overlay + IFrame

Usamos um IFrame oculto para isolar o conteúdo de impressão do layout principal da página. Um Overlay fornece a interface para o usuário iniciar o download.

Lições Aprendidas

1. A impressão nativa do navegador produz PDFs de qualidade muito superior
2. CSS break-inside: avoid é essencial para paginação inteligente
3. IFrames isolam perfeitamente o contexto de impressão

Conclusão

A migração de html2pdf.js para impressão nativa foi a melhor decisão técnica para o recurso de PDF do md-to.com. O resultado é um PDF de alta qualidade, vetorial e com paginação inteligente.