Ejemplos de Jh2Pdf — HTML a PDF con tablas e imágenes

1 · Portada y tipografía

Fondo degradado, 12 familias incrustadas, pesos de 400 a 700, cursiva, mayúsculas espaciadas, subrayado y tachado.

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

Informe 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 octubre

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. Llama a extractLayout(pages) y envía el 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

Cursiva lorem

Mayúsculas

Color de marca

Opacidad 45%

E S P A C I O

Fuentes incluidas 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 · ejemplosPágina 1 de 7

2 · Tablas de informe

Encabezado degradado, filas cebra, esquinas redondeadas con overflow: hidden, insignias, barras de progreso y tabla con grupos (colspan/rowspan).

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

Tablas

Lorem ipsum por región

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

Ingresos totales$4,82 M+12,4% en el año

Clientes activos18.204+8,1%

Ticket medio$264+3,9%

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

Desempeño por unidad

Unidad	Responsable	Ingresos	Estado
Lorem Norte	Ipsum Dolor	$912.400	En meta
Consectetur Sur	Amet Elit	$801.150	En meta
Adipiscing Este	Sed Tempor	$640.020	En riesgo
Eiusmod Oeste	Labore Magna	$1.020.900	En meta
Incididunt Centro	Ut Enim	$402.310	Por debajo
Veniam Litoral	Quis Nostrud	$713.880	En riesgo
Exercitation Sierra	Ullamco Laboris	$329.640	En riesgo
Total		$4.820.300

Comparativo trimestral colspan, rowspan y columna destacada

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 · ejemplosPágina 2 de 7

3 · Planes y tabla comparativa

Tarjetas con sombra sólida (sin desenfoque), marcadores hechos con un ::before vacío y tabla de funciones con columna destacada.

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

Tablas

Elige tu plan lorem

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

Lorem

Para empezar

$0 /mes

3 documentos ipsum
Exportación a PDF
1 usuario
Soporte por correo

Popular

Ipsum

Para equipos

$49 /mes

Documentos ilimitados
Marca propia
10 usuarios
Fuentes personalizadas
Soporte prioritario

Dolor

Para empresas

$199 /mes

Todo lo de Ipsum
Usuarios ilimitados
SSO y auditoría
Gerente de cuenta

Comparativa de funciones

Función	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	Correo	Prioritario	Dedicado
Ullamco laboris nisi

Jh2Pdf · ejemplosPágina 3 de 7

4 · Cajas y efectos

Degradados verticales y horizontales con varias paradas, radios por esquina, bordes por lado, sombras sólidas apiladas, sombra interior, opacidad y recorte redondeado.

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

Efectos

Cajas, degradados y sombras

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

Degradados y sombras

Verticallinear-gradient(#a855f7, #4f46e5)

Horizontalto right, #f97316, #ec4899

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

Suave con borde#ffffff → #e0e7ff

Esquinas asimétricas4px 40px 4px 40px

Sombras apiladas8px 8px 0, 16px 16px 0

Formas con CSS

Avisos marcador con ::before absoluto

InformaciónLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

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

AtenciónDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.

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

Recorte redondeado y 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 · ejemplosPágina 4 de 7

5 · Imágenes y filtros

Los filtros CSS se aplican en el servidor con GD. Además: object-fit, recorte con esquinas redondeadas y un drop-shadow que sigue la transparencia del PNG.

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

Imágenes

Filtros, recortes y sombras

La misma imagen (dibujada en un <canvas> y enviada como data:) con cada filtro 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 y 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 · ejemplosPágina 5 de 7

6 · Listas y marcas a mano

Viñetas de lista (disco, círculo, cuadrado, números, letras, ::marker de color) y marcas dibujadas a mano sobre el texto (marks: true).

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

Listas

Listas y resaltados

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

Viñetas

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

Paso a paso marcador con ::before y degradado

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 a mano

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 · ejemplosPágina 6 de 7

7 · Documento de negocio: factura

Un caso real: encabezado con logo en CSS, bloques de dirección, tabla de conceptos con descripción en dos líneas, totales y sello semitransparente.

flexgridposition: absoluteopacitywhite-space: nowrap

Lorem Ipsum S.L.

FACTURAN.º 2026-00417
Emisión: 17/10/2026
Vencimiento: 31/10/2026

PAGADO

Emisor

Lorem Ipsum S.L.
Calle Dolor Sit, 123
Madrid
NIF B-00000000

Cliente

Consectetur S.A.
Av. Adipiscing, 4567
Barcelona
NIF A-11111111

Proyecto

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

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

Subtotal$13.170,00

Descuento (5%)− $658,50

Impuestos (IVA 2%)$250,23

Total$12.761,73

Observaciones
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.

Pago recibido
Transferencia el 20/10/2026
Referencia 9F3A-21C7-77B0

Jh2Pdf · ejemplosPágina 7 de 7

Galería de ejemplos

1 · Portada y tipografía

Lorem ipsum dolor sit amet, consectetur

Estilos de texto

Fuentes incluidas SIL Open Font License

2 · Tablas de informe

Lorem ipsum por región

Desempeño por unidad

Comparativo trimestral colspan, rowspan y columna destacada

3 · Planes y tabla comparativa

Elige tu plan lorem

Comparativa de funciones

4 · Cajas y efectos

Cajas, degradados y sombras

Degradados y sombras

Formas con CSS

Avisos marcador con ::before absoluto

Recorte redondeado y código

5 · Imágenes y filtros

Filtros, recortes y sombras

filter

Recortes y sombra

6 · Listas y marcas a mano

Listas y resaltados

Viñetas

disc + circle

square

decimal + ::marker

lower-alpha / upper-alpha

Paso a paso marcador con ::before y degradado

Marcas a mano

7 · Documento de negocio: factura

Emisor

Cliente

Proyecto