Plantilla Blade para DomPDF: imágenes en base64, fuentes y maquetación sin flex ni grid
Hola, bienvenido. Una plantilla Blade para DomPDF se maqueta con tablas y medidas en milímetros, lleva las imágenes dentro del HTML en base64 y usa fuentes locales, porque DomPDF no entiende flex ni grid y no descarga nada de fuera. En esta lección vamos a escribir la plantilla definitiva del informe, un A4 de 2 páginas con los KPIs y los 3 gráficos en la primera y los productos más vendidos en la segunda, con un componente x-pdf.kpi para cada tarjeta. Además, vamos a exportar los gráficos a doble resolución y a un tamaño fijo, para que salgan nítidos y no dependan de la pantalla de quien pulsa el botón.
Es la última lección del curso, y al terminarla el botón del dashboard descarga un informe que ya se puede mandar a un cliente.
Lo que DomPDF soporta y lo que no
Cuando DomPDF no soporta una regla de CSS, no da ningún error: la regla no se aplica y el PDF sale distinto de lo que esperabas. Esto es lo que usamos en la plantilla y lo que evitamos:
| DomPDF 3 | En la plantilla | |
|---|---|---|
| Flexbox y grid | No | Tablas: una fila de 4 celdas para los KPIs y otra de 2 para el donut y las barras |
| JavaScript | No | Los gráficos llegan como PNG desde el navegador |
@page con tamaño y márgenes |
Sí | A4 vertical con márgenes en milímetros |
page-break-before y page-break-inside: avoid |
Sí | Bloques que no se parten y la tabla de productos en la página 2 |
| Celdas de tabla partidas entre 2 páginas | No | Cada fila de la tabla de productos, entera en una página |
| Cabecera y pie repetidos en cada página | No, con spatie/laravel-pdf se añaden al principio y al final del cuerpo | Bloques normales al principio y al final |
border-radius |
Sí | Esquinas redondeadas en las tarjetas |
| Imágenes PNG con transparencia | Sí | Data URLs en base64, con fondo blanco |
| Imágenes, CSS y fuentes por URL | Desactivado por defecto | Todo dentro del HTML o en rutas locales |
@font-face con un archivo local |
Sí, dentro del chroot |
DejaVu Sans, que viene con DomPDF |
Así que la plantilla lleva tablas para todo lo que va en columnas, tamaños en milímetros y los saltos de página decididos de antemano. Antes de escribirla, creamos la pieza que se repite 4 veces.
- 02x-pdf.kpi: la tarjeta del PDF
- 03La plantilla del informe
- 04Por qué las imágenes van en base64
- 05Gráficos nítidos y del mismo tamaño en cualquier pantalla
- 06Fuentes en DomPDF
- 07El test del contenido
- 08El informe en PDF
- 09Hasta aquí el curso
