Integración de Logos en Reportes PDF – opReports 4.6.7

A partir de la versión 4.6.7 de opReports, se habilita la generación de informes en formato PDF con la posibilidad de incluir un logo o imagen corporativa. Esta imagen se visualizará únicamente al exportar el reporte a PDF.

Para implementar esta funcionalidad, se deben realizar ajustes en dos archivos de configuración y agregar la imagen correspondiente al sistema.

Archivos a modificar

opReports_report_pdf.css – Define el estilo visual del reporte PDF.
opCommon.json – Configura el uso del archivo .css y la imagen del logo.

Pasos para agregar un logo al PDF

Subir el archivo de imagen al servidor

Subir el archivo a la carpeta /usr/local/omk/public/omk/img/
Los formatos permitidos son .png y .jpg.
Ejecutar el comando siguiente para asegurar los permisos del archivo:

sudo chmod 644 /usr/local/omk/public/omk/img/archivo.png

o

sudo chmod 644 /usr/local/omk/public/omk/img/archivo.jpg

Con el comando ls -lt, validamos que se cuenten con los permisos.

cd /usr/local/omk/pulic/omk/img
ls -lrt archivo.png
o
ls -lrt archivo.jpg

-rw-r--r-- 1 root root  14577 Nov 9 23:40 archivo.png

Editar el archivo .css

Editar el archivo /usr/local/omk/public/omk/css/opReports_report_pdf.css
Puedes usar el archivo existente o crear una copia personalizada.

cp opReports_report_pdf.css opReports_report_pdf_custom.css

Nota: una buena práctica es generar un archivo nuevo en el cual trabajar, para que el archivo original quede como respaldo en caso de necesitarse.

En el archivo .css que se va a usar, buscar el comentario /* custom closing image logo */ y adaptar las líneas que se encuentran abajo de img.closing-image según se requiera:

/* custom closing image logo */
img.block-image {
        display: block;
}
img.closing-image {
        max-height: 92px;
        margin-top: 8px;
}

Por ejemplo:

- Para posicionar el logo en la parte inferior derecha del PDF, utilizar el siguiente código:

img.closing-image {
	float: right;
	margin-top: 20px;
}

- Para posicionar el logo en la parte superior derecha, utilizar el siguiente código:

img.closing-image{
    position: fixed;
    top: 25px;
    right: 10px;
    width: 120px;
}

Puede ajustarse la alineación y el tamaño según se requiera.

Actualizar configuración en opCommon.json

Editar el archivo /usr/local/omk/conf/opCommon.json
Buscar el apartado "opreports_pdf_css" y definir el archivo .css a utilizar. En caso de haber generado un nuevo archivo, modificar el nombre; en caso de haber trabajado sobre el original no realizar modificaciones.

/* LINEA SIN MODIFICACIÓN*/

"opreports_pdf_css" : "<omk_public>/omk/css/opReports_report_pdf.css",

/*LINEA MODIFICADA*/

"opreports_pdf_css" : "<omk_public>/omk/css/opReports_report_pdf_custom.css",

En el mismo archivo, buscar el apartado "opreports_default_closing_image" y colocar la ruta en la que se encuentra la imagen a utilizar como logo: "opreports_default_closing_image": "<omk_public>/omk/img/archivo.png" o "opreports_default_closing_image": "<omk_public>/omk/img/archivo.jpg" según corresponda.

/* LINEA SIN MODIFICACIÓN*/

"opreports_default_closing_image" : null,

/*LINEA MODIFICADA*/

"opreports_default_closing_image" : "<omk_public>/omk/img/archivo.png",

Reiniciar omkd para que los cambios sean aplicados.

systemctl restart omkd

Resultado

Ingresar a opReports, generar un reporte y exportarlo a PDF. Al descargarlo, el logo se mostrará en la parte inferior derecha o superior derecha del documento, según lo definido en el .css.

Ejemplo del logo en la parte inferior derecha:

Ejemplo del logo en la parte superior derecha: