3 formas de configurar Header y Footer DOMPDF. En este articulo mostraremos 3 formas de integrar encabezados y pie de páginas en nuestros documentos PDF creados por la librería DOMPDF y en lenguaje de programación PHP.
3 formas de configurar Header y Footer DOMPDF
- Primera forma: Encabezado / pie con márgenes
- Segunda forma: Encabezado / pie de página ancho completo
- Tercera forma: Encabezado / pie de página con imágenes
¿Como integrar Header y Footer en DOMPDF PHP?
Generalmente los PDF tienen un pie de página y un encabezado donde debe colocar el logos de la empresa, direcciones, correos electrónicos, teléfonos, etc.
En la librería Dompdf esto se puede configurar haciendo uso de los estilos CSS y también las medidas de márgenes o el tamaño de la página. Por lo tanto, se debe de configurar y probar continuamente diferentes tamaños.
Primera forma: Encabezado / pie con márgenes
Si desea configurar HTML en su pie de página y encabezado, será suficiente incluir las etiquetas de encabezado y pie de página en el documento con unas dimensiones específicas en CSS. Sin embargo, es necesario fijar la posición de ambos elementos, de lo contrario serán relativos al contenido de tu PDF.
Además, se debe proporcionar las dimensiones de la página de acuerdo con sus necesidades. El siguiente ejemplo generaremos un documento PDF de 2 páginas con márgenes.
<html>
<head>
<style>
/** Define the margins of your page **/
@page {
margin: 100px 25px;
}
header {
position: fixed;
top: -60px;
left: 0px;
right: 0px;
height: 50px;
/** Extra personal styles **/
background-color: #03a9f4;
color: white;
text-align: center;
line-height: 35px;
}
footer {
position: fixed;
bottom: -60px;
left: 0px;
right: 0px;
height: 50px;
/** Extra personal styles **/
background-color: #03a9f4;
color: white;
text-align: center;
line-height: 35px;
}
</style>
</head>
<body>
<!-- Define header and footer blocks before your content -->
<header>
Cabecera del documento
</header>
<footer>
Copyright © <?php echo date("Y");?>
</footer>
<!-- Wrap the content of your PDF inside a main tag -->
<main>
<p style="page-break-after: always;">
Content Page 1
</p>
<p style="page-break-after: never;">
Content Page 2
</p>
</main>
</body>
</html>Salida en el navegador
En el documento PDF se creará con márgenes. El encabezado y el pie de página se repiten en cada página del PDF. Por lo tanto, puede agregar el HTML que desee dentro de ellos, ya que esto es solo un ejemplo y puede personalizar textos y colores de fondo según su necesidad.
Segunda forma: Encabezado / pie de página ancho completo
Con el ejemplo anterior vemos que tiene margen en los 4 lados del documento. El encabezado y el pie de página encajan dentro de los márgenes de la página, lo que a veces no es exactamente lo que requiere. Además, en el caso de que necesite que el pie de página y el encabezado tengan el mismo ancho se debe proceder de manera diferente.
Documento PDF sin márgenes
Lo que haremos será establecer los márgenes de la página en 0, esta configuración afectará automáticamente a todo el contenido del PDF quepa en toda la hoja, haciendo que el pie de página y el encabezado tengan el 100% de ancho sin márgenes.
<html>
<head>
<style>
/**
Establezca los márgenes de la página en 0, por lo que el pie de página y el encabezado
puede ser de altura y anchura completas.
**/
@page {
margin: 0cm 0cm;
}
/** Defina ahora los márgenes reales de cada página en el PDF **/
body {
margin-top: 2cm;
margin-left: 2cm;
margin-right: 2cm;
margin-bottom: 2cm;
}
/** Definir las reglas del encabezado **/
header {
position: fixed;
top: 0cm;
left: 0cm;
right: 0cm;
height: 2cm;
/** Estilos extra personales **/
background-color: #03a9f4;
color: white;
text-align: center;
line-height: 1.5cm;
}
/** Definir las reglas del pie de página **/
footer {
position: fixed;
bottom: 0cm;
left: 0cm;
right: 0cm;
height: 2cm;
/** Estilos extra personales **/
background-color: #03a9f4;
color: white;
text-align: center;
line-height: 1.5cm;
}
</style>
</head>
<body>
<!-- Defina bloques de encabezado y pie de página antes de su contenido -->
<header>
Cabecera del documento
</header>
<footer>
Copyright © <?php echo date("Y");?>
</footer>
<!-- Envuelva el contenido de su PDF dentro de una etiqueta principal -->
<main>
<h1>Hello World</h1>
</main>
</body>
</html>La ejecución de este ejemplo con Dompdf generaría el siguiente PDF:
Tercera forma: Encabezado / pie de página con imágenes
Si desea agregar una imagen como pie de página y encabezado, ya sea con la etiqueta <IMG> o una imagen de fondo en un contenedor deberá seguir la misma estructura del encabezado y pie de página basados en HTML de ancho completo.
Además, el contenido del pie de página y el encabezado ahora usaremos una etiqueta img con la imagen correspondiente (con la altura y el ancho completos). No olvidar de habilitar el DOMPDF para que acepte HTML externos y la ruta de la imagen debe incluir toda la ruta.
<html>
<head>
<style>
/**
Establezca los márgenes de la página en 0, por lo que el pie de página y el encabezado
puede ser de altura y anchura completas.
**/
@page {
margin: 0cm 0cm;
}
/** Defina ahora los márgenes reales de cada página en el PDF **/
body {
margin-top: 3cm;
margin-left: 2cm;
margin-right: 2cm;
margin-bottom: 2cm;
}
/** Definir las reglas del encabezado **/
header {
position: fixed;
top: 0cm;
left: 0cm;
right: 0cm;
height: 3cm;
}
/** Definir las reglas del pie de página **/
footer {
position: fixed;
bottom: 0cm;
left: 0cm;
right: 0cm;
height: 2cm;
}
</style>
</head>
<body>
<!-- Defina bloques de encabezado y pie de página antes de su contenido -->
<header>
<img src="header.png" width="100%" height="100%"/>
</header>
<footer>
<img src="footer.png" width="100%" height="100%"/>
</footer>
<!-- Envuelva el contenido de su PDF dentro de una etiqueta principal -->
<main>
<h1>Hello World</h1>
</main>
</body>
</html>La compilacion del codigo anterior generaría en Dompdf algo como este usando imagenes:
Nota
Para obtener un PDF dinámico con encabezado y pie de página basado en una imagen, es posible que deba experimentar, cambiar las alturas en CSS e incluso cambiar el tamaño de la imagen hasta que todo salga como se esperaba y brindar la ruta completa de la imagen.
Conclusión
En este articulo hemos aprendido con 3 ejemplos completo de como integrar encabezados y pie de página en nuestros documentos PDF generados con PHP y la librería DOMPDF.
Cabe resaltar que los ejemplos se pueden modificar a su criterio para que tenga un resultado deseado. Además, puede incluir imágenes, logos, textos. etc.
Para crear documentos dinámicos hemos usado la librería DOMPDF, pero existen varios. hemos optado por esta librería porque nos permite crear un PDF desde un fichero HTML o PHP externo. Además, podemos usar base de datos como ser MySQL.
Podemos usar el método GET o Método POST para generar documentos PDF dinámicos y realizar conexiones MYSQL para obtener registros de una base de datos.
Espero que esta brece explicación les ayude en sus proyectos web.
Descargar