Aprende a crear un PDF con fondo de marca de agua/imagen o membrete en Dompdf.

Cómo configurar una marca de agua en Dompdf

Configurar una marca de agua con Dompdf no es una tarea fácil ni intuitiva de lograr, especialmente si se tiene en cuenta que existen muchas posibilidades de implementación de una marca de agua en un PDF. Ignorando el hecho de que HTML y CSS no tienen nada que ver con el formato PDF, gracias a Dompdf, el generador de PDF compatible con CSS para PHP, podrá generar archivos PDF utilizando los lenguajes mencionados. Incluso con esta ventaja, sigue siendo difícil saber cómo agregar una marca de agua. Es por eso que en este artículo, le mostraremos cómo configurar 2 de los comportamientos de marca de agua más básicos en su PDF usando la biblioteca Dompdf.

A. Marca de agua de página completa (membrete comercial)

Si está buscando establecer una imagen de fondo para cada página, deberá crear su marcado siguiendo un formato específico que le permita agregar márgenes superior e inferior sin alterar el diseño del PDF. Como primero, deberá establecer los márgenes de todo el PDF en 0, esto le permitirá establecer una imagen de fondo con el ancho y alto completos (las mismas dimensiones de la hoja de papel). A continuación, debe envolver todo el contenido de su PDF dentro de una etiqueta principal, esto no tendrá ninguna regla CSS. También necesitas, ahora que la página no tiene márgenes, aplicarlos al cuerpo (que en este caso es nuestra página pdf). Como último, la parte más importante del tutorial, la marca de agua para tu PDF. La marca de agua debe ser un elemento div fijo, los elementos fijos en Dompdf aparecen en cada página del PDF, por lo que solo necesitaría especificar a estos elementos su tamaño y márgenes de acuerdo a sus necesidades. Este div contiene dentro de un img que con la imagen que desea como fondo y configura su altura y ancho al 100%.

En este ejemplo, tenemos como fondo una imagen jpg con el tamaño de 2554x3310px, por lo que nuestro marcado y estilos se ven como sigue:

Nota

Es importante establecer la z-indexpropiedad del objeto de marca de agua en un valor negativo para evitar que cubra el contenido de su PDF.

<html>
    <head>
        <style>
            /** 
            * Establecer los márgenes del PDF en 0
            * por lo que la imagen de fondo cubrirá toda la página.
            **/
            @page {
                margin: 0cm 0cm;
            }

            /**
            * Define los márgenes reales del contenido de tu PDF
            * Aquí arreglarás los márgenes del encabezado y pie de página
            * De tu imagen de fondo.
            **/
            body {
                margin-top:    3.5cm;
                margin-bottom: 1cm;
                margin-left:   1cm;
                margin-right:  1cm;
            }

            /** 
            * Defina el ancho, alto, márgenes y posición de la marca de agua.
            **/
            #watermark {
                position: fixed;
                bottom:   0px;
                left:     0px;
                /** El ancho y la altura pueden cambiar
                    según las dimensiones de su membrete
                **/
                width:    21.8cm;
                height:   28cm;

                /** Tu marca de agua debe estar detrás de cada contenido **/
                z-index:  -1000;
            }
        </style>
    </head>
    <body>
        <div id="watermark">
            <img src="background.jpg" height="100%" width="100%" />
        </div>

        <main> 
            <!-- El contenido de tu PDF aquí -->

            <h2>Hello World</h2>
        </main>
    </body>
</html>

Nuestro marcado en Dompdf generaría un PDF como el siguiente:

Dompdf background image

B. Marca de agua de página personalizada

Si su marca de agua no necesita cubrir toda la página, significa que su imagen se puede dibujar dentro de un área específica en el cuerpo de la página. Siguiendo la misma lógica de la marca de agua en toda la página, debe crear un div fijo con un índice z negativo. Dentro del div, debe agregar la etiqueta img con la altura y el ancho completos, ya que esto tomará el mismo tamaño que el div de la marca de agua. Puede especificar las dimensiones de la marca de agua con CSS, así como su posición horizontal y verticalmente. La posición de esta marca de agua depende totalmente de usted; en este ejemplo, agregaremos el logotipo de Our Code World en el medio de la página con el siguiente marcado:

<html>
    <head>
        <style>
            /** 
            * Defina el ancho, alto, márgenes y posición de la marca de agua.
            **/
            #watermark {
                position: fixed;

                /** 
                    Establece una posición en la página para tu imagen
                    Esto debería centrarlo verticalmente
                **/
                bottom:   10cm;
                left:     5.5cm;

                /** Cambiar las dimensiones de la imagen **/
                width:    8cm;
                height:   8cm;

                /** Tu marca de agua debe estar detrás de cada contenido **/
                z-index:  -1000;
            }
        </style>
    </head>
    <body>
        <div id="watermark">
            <img src="ocw_logo.png" height="100%" width="100%" />
        </div>

        <main> 
            <!-- El contenido de tu PDF aquí -->

            <h2>Hello World</h2>
        </main>
    </body>
</html>

Generar el marcado anterior en Dompdf generaría un PDF como:

Watermark Dompdf

Tenga en cuenta que en ambos ejemplos, la posición, el ancho o la altura de su contenido no se verán afectados por la marca de agua, ya que este es el objetivo, una imagen que se establece en el fondo y no afectará su contenido. será visible en la impresión.

Nota

Puede agregar muchas marcas de agua en la misma página que desee gracias a la regla fija en CSS. Dompdf agregará automáticamente los mismos elementos fijos a cada página del PDF generado.

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores