Exportar gráficos de Chart.js a PNG con toBase64Image y descargar el PDF desde Filament

Hola, bienvenido. Para tener los gráficos de Chart.js en un PDF sin Node ni Chrome en el servidor, se los pedimos al navegador: Chart.js devuelve cualquier gráfico como una imagen PNG en base64 con toBase64Image(), y esa imagen viaja al servidor como un texto más. En esta lección vamos a escribir el script que exporta los 3 gráficos del dashboard, a añadir el botón "Descargar PDF" en la cabecera y a recibir las imágenes en el servidor, validadas, para que el PDF de la lección 12 las lleve dentro.

DomPDF no ejecuta JavaScript, así que no puede dibujar un gráfico de Chart.js. Para pintarlos en el servidor harían falta Node con un Chrome sin cabeza o una librería de dibujo en PHP que repita los 3 gráficos con otra API, y las 2 cosas son justo lo que queremos evitar con DomPDF. Sin embargo, cuando el usuario pulsa el botón, los gráficos ya están dibujados en su navegador, con sus datos, sus colores y su formato. Solo tenemos que recogerlos.

Cada gráfico de Chart.js es una instancia con su API, y toBase64Image() devuelve el canvas tal como está en ese momento, como una data URL de PNG: un texto que empieza por data:image/png;base64, y sigue con la imagen codificada. Es lo mismo que da el método toDataURL() del propio canvas:

En el Chart.js que trae Filament, toBase64Image() llama por dentro a this.canvas.toDataURL() con los mismos argumentos, y en la prueba en el navegador las 2 devuelven exactamente el mismo texto. Usamos el de Chart.js porque, antes de exportar, vamos a necesitar la instancia para cambiar una opción del gráfico y redibujarlo, así que ya la tenemos a mano.

Esa opción es el fondo. El canvas de Chart.js es transparente, y un PNG transparente en un informe sale sin fondo y depende de dónde se pegue. En la lección 10 escribimos el plugin background, que rellena el gráfico con el color que diga options.plugins.background.color y que en pantalla no hace nada porque nadie lo activa. Lo activamos aquí, solo durante la exportación.

El recorrido es el que vimos en el diagrama de la lección 12: el navegador exporta los 3 gráficos, se los manda a un método de la página del dashboard junto con el periodo del filtro, y ese método construye el informe con el builder y lo devuelve como PDF con el servicio.