Exemplos do Jh2Pdf — HTML para PDF com tabelas e imagens

1 · Capa e tipografia

Degradê no fundo, 12 famílias embutidas, pesos de 400 a 700, itálico, caixa-alta com espaçamento, sublinhado e riscado.

linear-gradient@font-facetext-transformletter-spacingtext-decoration

Relatório anual · 2026

Lorem ipsum dolor sit amet, consectetur

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa.

Lorem Ipsum Dolor Sit Amet · 17 de outubro

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.

Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. ~~Sed dignissim lacinia nunc~~.

Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Chame extractLayout(pages) e envie o resultado.

Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

“Nulla facilisi. Aenean nec eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.” — Quisque Volutpat, Condimentum Velit

Estilos de texto

Regular 400

Medium 500

Semibold 600

Bold 700

Itálico lorem

Caixa alta

Cor da marca

Opacidade 45%

E S P A Ç O

Fontes incluídas SIL Open Font License

Lorem ipsumBarlow Condensed

Lorem ipsumDM Sans

Lorem ipsumFira Code

Lorem ipsumInter

Lorem ipsumJetBrains Mono

Lorem ipsumJh Serif

Lorem ipsumJh Serif Text

Lorem ipsumMontserrat

Lorem ipsumNunito

Lorem ipsumOpen Sans

Lorem ipsumJh Display

Lorem ipsumJh Serif Book

Jh2Pdf · exemplosPágina 1 de 7

2 · Tabelas de relatório

Cabeçalho em degradê, linhas zebradas, cantos arredondados com overflow: hidden, selos, barras de progresso e tabela com grupos (colspan/rowspan).

border-collapse:nth-child(even)overflow: hiddencolspantabular-nums

Tabelas

Lorem ipsum por região

Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor volutpat.

Receita totalR$ 4,82 mi+12,4% no ano

Clientes ativos18.204+8,1%

Ticket médioR$ 264+3,9%

Cancelamentos2,7%+0,4 p.p.

Desempenho por unidade

Unidade	Responsável	Receita	Status
Lorem Norte	Ipsum Dolor	R$ 912.400	No alvo
Consectetur Sul	Amet Elit	R$ 801.150	No alvo
Adipiscing Leste	Sed Tempor	R$ 640.020	Atenção
Eiusmod Oeste	Labore Magna	R$ 1.020.900	No alvo
Incididunt Centro	Ut Enim	R$ 402.310	Abaixo
Veniam Litoral	Quis Nostrud	R$ 713.880	Atenção
Exercitation Serra	Ullamco Laboris	R$ 329.640	Atenção
Total		R$ 4.820.300

Comparativo trimestral colspan, rowspan e coluna em destaque

Indicador	2025		2026		Var.
Indicador	T1	T2	T1	T2	Var.
Lorem ipsum
Dolor sit	1.204	1.318	1.402	1.588	+20,5%
Amet consectetur	842	880	915	1.002	+13,9%
Adipiscing elit
Sed do eiusmod	63%	66%	69%	72%	+6 p.p.
Tempor incididunt	4,1	4,3	4,4	4,6	+7,0%
Labore et dolore	17 d	15 d	14 d	12 d	−20,0%

Jh2Pdf · exemplosPágina 2 de 7

3 · Planos e tabela comparativa

Cartões com sombra sólida (sem desfoque), marcadores feitos com ::before vazio e tabela de recursos com coluna destacada.

box-shadow 6px 6px 0::before { content: '' }floatborder-radius

Tabelas

Escolha seu plano lorem

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum aenean imperdiet etiam ultricies nisi vel augue.

Lorem

Para começar

R$ 0 /mês

3 documentos ipsum
Exportação em PDF
1 usuário
Suporte por e-mail

Popular

Ipsum

Para equipes

R$ 49 /mês

Documentos ilimitados
Marca própria
10 usuários
Fontes personalizadas
Suporte prioritário

Dolor

Para empresas

R$ 199 /mês

Tudo do Ipsum
Usuários ilimitados
SSO e auditoria
Gerente de conta

Comparativo de recursos

Recurso	Lorem	Ipsum	Dolor
Sit amet consectetur
Adipiscing elit sed
Eiusmod tempor
Incididunt ut labore
Magna aliqua enim	1	10	Ilimitado
Minim veniam quis
Nostrud exercitation	E-mail	Prioritário	Dedicado
Ullamco laboris nisi

Jh2Pdf · exemplosPágina 3 de 7

4 · Caixas e efeitos

Degradês verticais e horizontais com várias paradas, cantos diferentes por canto, bordas diferentes por lado, sombras sólidas empilhadas, sombra interna, opacidade e recorte arredondado.

linear-gradientborder-*-widthbox-shadow insetopacityoverflow: hidden

Efeitos

Caixas, degradês e sombras

Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Degradês e sombras

Verticallinear-gradient(#a855f7, #4f46e5)

Horizontalto right, #f97316, #ec4899

3 paradas#0ea5e9, #22c55e 50%, #eab308

Suave com borda#ffffff → #e0e7ff

Cantos assimétricos4px 40px 4px 40px

Sombras empilhadas8px 8px 0, 16px 16px 0

Formas com CSS

Avisos marcador com ::before absoluto

InformaçãoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

SucessoUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

AtençãoDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.

ErroExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.

Recorte arredondado e código

Lorem

Ipsum

Dolor

Sit

// navegador

const layout = await extractLayout(pages, { width: 794, height: 1123 });

await fetch('pdf.php', { method: 'POST', body: JSON.stringify(layout) });

Jh2Pdf · exemplosPágina 4 de 7

5 · Imagens e filtros

Os filtros de CSS são aplicados no servidor com a GD. Também: object-fit, recorte com cantos arredondados e drop-shadow que acompanha a transparência do PNG.

filterobject-fit: cover | containdrop-shadowdata:image/…

Imagens

Filtros, recortes e sombras

A mesma imagem (gerada num <canvas> e enviada como data:) com cada filtro do CSS.

filter

none

grayscale(1)

sepia(1)

blur(3px)

saturate(2.2)

hue-rotate(140deg)

contrast(1.7)

invert(1)

brightness(1.4) opacity(.6)

Recortes e sombra

Lorem ipsum dolor

Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla.

Jh2Pdf · exemplosPágina 5 de 7

6 · Listas e marcas à mão

Marcadores de lista (disco, círculo, quadrado, números, letras, ::marker colorido) e as marcas desenhadas à mão sobre o texto (marks: true).

list-style-type::marker.mk-circle--mk-color

Listas

Listas e destaques

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient.

Marcadores

disc + circle

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
- Sed do eiusmod tempor
- Incididunt ut labore
Magna aliqua ut enim

square

Ad minim veniam quis
Nostrud exercitation ullamco
Laboris nisi ut aliquip
Ex ea commodo consequat

decimal + ::marker

Duis aute irure dolor
In reprehenderit in voluptate
Velit esse cillum dolore
Eu fugiat nulla pariatur

lower-alpha / upper-alpha

Excepteur sint occaecat
Cupidatat non proident

Sunt in culpa qui officia
Deserunt mollit anim

Passo a passo marcador com ::before e degradê

Lorem ipsum — dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod — tempor incididunt ut labore et dolore magna.
Ut enim ad minim — veniam, quis nostrud exercitation ullamco.

Marcas à mão

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Jh2Pdf · exemplosPágina 6 de 7

7 · Documento de negócio: fatura

Um caso real: cabeçalho com logo em CSS, blocos de endereço, tabela de itens com descrição em duas linhas, totais e carimbo semitransparente.

flexgridposition: absoluteopacitywhite-space: nowrap

Lorem Ipsum Ltda.

FATURANº 2026-00417
Emissão: 17/10/2026
Vencimento: 31/10/2026

PAGO

Emitente

Lorem Ipsum Ltda.
Rua Dolor Sit, 123
São Paulo · SP
CNPJ 00.000.000/0001-00

Cliente

Consectetur S.A.
Av. Adipiscing, 4567
Curitiba · PR
CNPJ 11.111.111/0001-11

Projeto

Portal Elit
Contrato 88/2026
Período: setembro
Ref.: PO-55120

#	Descrição	Qtd.	Unitário	Total
1	Lorem ipsum dolor sit ametConsectetur adipiscing elit, sed do eiusmod tempor	40 h	R$ 180,00	R$ 7.200,00
2	Incididunt ut laboreEt dolore magna aliqua, ut enim ad minim veniam	1	R$ 2.400,00	R$ 2.400,00
3	Quis nostrud exercitationUllamco laboris nisi ut aliquip ex ea commodo	12	R$ 95,00	R$ 1.140,00
4	Duis aute irure dolorIn reprehenderit in voluptate velit esse cillum	3	R$ 650,00	R$ 1.950,00
5	Excepteur sint occaecatCupidatat non proident, sunt in culpa qui officia	1	R$ 480,00	R$ 480,00

SubtotalR$ 13.170,00

Desconto (5%)− R$ 658,50

Impostos (ISS 2%)R$ 250,23

TotalR$ 12.761,73

Observações
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.

Pagamento recebido
Pix em 20/10/2026
Autenticação 9F3A-21C7-77B0

Jh2Pdf · exemplosPágina 7 de 7

Galeria de exemplos

1 · Capa e tipografia

Lorem ipsum dolor sit amet, consectetur

Estilos de texto

Fontes incluídas SIL Open Font License

2 · Tabelas de relatório

Lorem ipsum por região

Desempenho por unidade

Comparativo trimestral colspan, rowspan e coluna em destaque

3 · Planos e tabela comparativa

Escolha seu plano lorem

Comparativo de recursos

4 · Caixas e efeitos

Caixas, degradês e sombras

Degradês e sombras

Formas com CSS

Avisos marcador com ::before absoluto

Recorte arredondado e código

5 · Imagens e filtros

Filtros, recortes e sombras

filter

Recortes e sombra

6 · Listas e marcas à mão

Listas e destaques

Marcadores

disc + circle

square

decimal + ::marker

lower-alpha / upper-alpha

Passo a passo marcador com ::before e degradê

Marcas à mão

7 · Documento de negócio: fatura

Emitente

Cliente

Projeto