Muchos PDF tienen un pie de página y un encabezado donde debe colocar el logotipo de la empresa, direcciones, correos electrónicos, etc. En Dompdf esto puede ser un poco complicado debido a los márgenes o el tamaño de la página, por lo que debe ser paciente y probar continuamente diferentes tamaños y configurando lo que se ajuste a tu caso. En este artículo, le mostraremos cómo implementar un encabezado y pie de página en su PDF usando HTML o imágenes en Dompdf.
A. Encabezado / pie de página basado en HTML
Si solo 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. Es necesario fijar la posición de ambos elementos, de lo contrario serán relativos al contenido de tu PDF, cosa que obviamente no queremos. También debe proporcionar las dimensiones de la página de acuerdo con sus necesidades. El siguiente ejemplo genera un PDF de 2 páginas con márgenes de la altura descrita:
<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>
Our Code World
</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>Si genera el marcado anterior, el PDF generado se verá así:
El encabezado y el pie de página se repiten en cada página del PDF. Obviamente, puede agregar el HTML que desee dentro de ellos, ya que esto es solo un ejemplo, lo hicimos lo más simple posible.
B. Encabezado / pie de página basado en HTML de ancho completo
Con el enfoque anterior, tienes un pequeño problema. 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 necesita. En caso de que necesite que el pie de página y el encabezado tengan el mismo ancho que la hoja de papel, debe proceder de manera diferente. Si este es el caso, puedes hacer lo siguiente: establecer los márgenes de la página en 0, esto hará automáticamente que 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. Pero ahora tiene otro problema y son los márgenes del contenido real de su PDF. Esto se puede establecer con márgenes en el cuerpo, tenga en cuenta que los márgenes (al menos la parte superior e inferior) deben ser mayores que la altura del pie de página y el encabezado o no verá parte de su contenido.
<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>
Our Code World
</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>
El marcado en Dompdf generaría el siguiente PDF:
C. Encabezado / pie de página basado en imágenes
Si desea agregar una imagen como pie de página y encabezado, deberá seguir la misma estructura del encabezado y pie de página basados ââen Html de ancho completo. Sin embargo, el contenido del pie de página y el encabezado ahora sería una etiqueta img con la imagen correspondiente (con la altura y el ancho completos).
<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>
El marcado anterior generaría en Dompdf algo como:
Nota
Para obtener un PDF perfecto 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.
Que te diviertas ❤️!
Conviertete en un programador más sociable