El blog de willicab

Editar un Archivo SVG y convertirlo a PDF con PHP

Necesitaba generar una planilla llenándola con datos extraídos de una base de datos usando un diseño muy específico, iba a ser algo complejo crear la planilla usando HTML para luego luego exportarla con alguna librería como html2pdf por ejemplo, así que se me ocurrió crear un archivo SVG con el diseño de la planilla tal como quería el cliente que se mostrara y desde PHP editar dicho archivo y a partir de allí, generar el archivo PDF solicitado, me puse en la búsqueda y esto fue lo que logré.

Creación del SVG

Para crear el archivo SVG usé la herramienta de diseño vectorial Inkscape la cual es una maravilla en este tipo de situaciones, ya que te permite crear cualquier diseño que necesites en las medidas especificas en pixeles, milimetros o pulgadas, entre otras; además de poder cambiar el tamaño del lienzo a cualquier tamaño de hoja como carta, oficio, A4, etc; para este ejemplo creé en una planilla tamaño carta un par de campos de texto a llenar y una serie de opciones a marcar, el resultado fue como el que se muestra en la siguiente imagen.

Planilla de ejemplo
Planilla de ejemplo

Los campos que editaremos serán los que se muestran como NOMBRES DE LA PERSONA y APELLIDOS DE LA PERSONA y los cuadrados que están en las opciones de Documentos requeridos, para poder editarlos desde PHP debemos conocer el ID de estos campos y preferiblemente cambiarlos por unos que sean más fáciles de recordar, para cambiar el ID de los objetos haremos lo siguiente.

Edición del ID del objeto
Edición del ID del objeto
  1. Seleccionar el objeto.
  2. En las propiedades del objeto (Ctrl+Shit+O) seleccionar la opción ID y colocar una que describa al objeto.
  3. Guardar los cambios.

A los campos de texto hay que tratarlos de manera diferente, ya que dentro de la etiqueta text hay una etiqueta tspan que no se puede seleccionar desde las propiedades del objeto, así que usaremos en este caso el editor XML.

Edición del ID del objeto
Edición del ID del objeto
  1. Seleccionar el objeto.
  2. En el editor XML (Ctrl+Shit+X) seleccionar la etiqueta tspan que se encuentra dentro de la etiqueta text.
  3. Seleccionar la opción ID y colocar una que describa al objeto.
  4. Guardar los cambios.

Ya con esta base podemos ir al código.

Selección de las librerías

Para este proyecto seleccioné dos librerías de varias que probé, para la edición de SVG usé php-svg" target="_blank" rel="noopener">php-svg y para la creación del PDF usé TCPDF" target="_blank" rel="noopener">TCPDF, yo las instalé vía composer a partir del siguiente archivo composer.json

Luego con esto ejecutamos el comando composer install para instalar dichas librerías.

 

Lo primero que haremos será incluir las librerías

TCPDF no tiene namespace por lo que no se agrega. Lo siguiente será cargar el archivo SVG para modificarlo

Cómo podemos ver, en el primer bloque cargamos el archivo, en el segundo bloque modificamos el valor dentro de los campos txtNombre y txtApellido y en el tercer bloque modificamos el estilo fill de los objetos optDNI, optNacimiento y optMatrimonio.

Ya realizadas las modificaciones en la planilla, crearemos el PDF para incluirlo.

Lo primero que haremos será crear el objeto, un documento con formato tamaño carta y orientación retrato, las configuraciones iniciales son más una especie de hack, las dos primeras es para evitar que se creen una cabecera y un pie de página las dos siguientes son necesarias porque por alguna razón la imagen no toma el ancho completa al insertarse, luego agrego una página y agrego el SVG, finalmente guardo el archivo, al final se crea un archivo que se ve de la siguiente forma.

Archivo resultante
Archivo resultante

El código completo es el siguiente.

Y el archivo SVG de prueba lo puedes descargar desde este enlace.

Eso es todo por ahora, si tienes alguna duda o sugerencia puedes dejarla en los comentarios.

Deja un comentario

This site uses Akismet to reduce spam. Learn how your comment data is processed.