Logosulfite.app
rafagazani/sulfite ★9999⑂99

HTML

Renderização em HTML com layout position-based e Chart.js

HTML#

Gera HTML com CSS inline que replica o posicionamento do PDF. Gráficos são renderizados com Chart.js 4 (carregado via CDN).

Uso#

final htmlBytes = await engine.renderToHtml(context);

// Salvar como arquivo
File('report.html').writeAsBytesSync(htmlBytes);

Layout#

O HTML usa o mesmo modelo de posicionamento do PDF:

  • Cada band → <div> com position: relative e height fixo
  • Cada elemento → position: absolute com left e top em pixels
  • A página → <div class="page"> com max-width baseado no formato (595px para A4)
  • Margens → padding no container da página
<div class="page" style="max-width:595px; padding:40px;">
  <div class="band" style="height:120px; position:relative;">
    <div style="position:absolute; left:40px; top:40px; font-size:32px; font-weight:bold;">
      INVOICE
    </div>
  </div>
</div>

Paginação#

O HtmlRenderer implementa paginação explícita multi-página:

  • Cada página tem altura exata (height do pageSettings, não min-height)
  • HeaderBand é repetida em todas as páginas na ordem de definição
  • SummaryBand é ancorada ao rodapé da última página — equivalente ao comportamento do PDF
  • Quebra de página via forcePageBreakBefore: true na band insere uma nova <div class="page">

Gráficos#

Gráficos (ChartElement) são renderizados como <canvas> com Chart.js 4. O script é injetado automaticamente via CDN: 

<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>

Os dados e a configuração do gráfico são inline no HTML. Funciona ao abrir o arquivo em um browser com acesso à internet.

Recursos suportados:

  • Barras empilhadas — stacked: true ativa scales.x.stacked e scales.y.stacked no Chart.js (só para tipo bar)
  • Barras agrupadas — comportamento padrão com múltiplas séries
  • Borda — hasBorder aplica CSS border (sólida ou tracejada) ao container do canvas
  • Legenda — posição validada (top, bottom, left, right)
  • Paleta de cores — séries sem cor definida usam a paleta padrão de 10 cores; fatias de pizza sempre usam a paleta
  • IDs únicos — cada canvas tem ID com contador incremental, evitando colisões em group bands

Print#

O HTML inclui estilos @media print otimizados:

  • Remove sombras e margens externas
  • Aplica margens do pageSettings via @page

O título do relatório não é inserido no output HTML — nenhuma tag <h1> é gerada pelo renderer.

Limitações#

  • Barcodes dependem de JavaScript no browser (JsBarcode/QRCode.js)
  • Fontes customizadas não são aplicadas (usa a fonte do sistema)