RSS

PDF desde PHP: Encabezado y Pie de página (3/5)

07 Abr

Ahora empieza lo bueno 😀 vamos a crear el encabezado y pie de página. Cabe mencionar que estos dos tags solo se define una vez y después se pondrán automáticamente en cada hoja que se genere.

Recapitulando un poco, el archivo que está en php/pdf/pdf_blanco.php, siempre tendrá el mismo contenido y es el siguiente:

<?php
	ob_start();
    include(dirname(__FILE__).'/vistas/pdf_blanco.php');
    $content = ob_get_clean();

    require_once(dirname(__FILE__).'/../html2pdf.class.php');

    try
    {
        $html2pdf = new HTML2PDF('P', 'A4', 'es', true, 'UTF-8', 3);
        $html2pdf->pdf->SetDisplayMode('fullpage');
        $html2pdf->writeHTML($content);
        $html2pdf->Output('exemple03.pdf');
    }
    catch(HTML2PDF_exception $e) {
        echo $e;
        exit;
    }
?>

El que se irá modificando a lo largo de los tutos será siempre la vista, es decir, php/pdf/vistas/pdf_blanco.php. Ahora vamos a agregar los tags <page_header> y <page_footer> el código es este:

<style>
<!--
#encabezado {padding:10px 0; border-top: 1px solid; border-bottom: 1px solid; width:100%;}
#encabezado .fila #col_1 {width: 15%}
#encabezado .fila #col_2 {text-align:center; width: 55%}
#encabezado .fila #col_3 {width: 15%}
#encabezado .fila #col_4 {width: 15%}

#encabezado .fila td img {width:50%}
#encabezado .fila #col_2 #span1{font-size: 15px;}
#encabezado .fila #col_2 #span2{font-size: 12px; color: #4d9;}

#footer {padding-top:5px 0; border-top: 1px solid; width:100%;}
#footer .fila td {text-align:center; width:100%;}
#footer .fila td span {font-size: 10px; color: #f5a;}

-->
</style>
<page backtop="10mm" backbottom="10mm" backleft="10mm" backright="20mm">
    <page_header>
		<table id="encabezado">
            <tr class="fila">
                <td id="col_1" >
					<img src="../../images/img_izq.png">
				</td>
                <td id="col_2">
					<span id="span1">Aquí pueden ir más span o divs según requiera el diseño</span>
					<br>
					<span id="span2">Este es otro span con otros estilos</span>
				</td>
                <td id="col_3">
					<img  src="../../images/img_der_1.png">
				</td>
                <td id="col_4">
					<img src="../../images/img_der_2.png">
				</td>
            </tr>
        </table>
    </page_header>

    <page_footer>
		<table id="footer">
            <tr class="fila">
				<td>
					<span>Este el footer y pueder ir con letra más pequeña por ejemplo poner una
					dirección o algo así :P</span>
				</td>
			</tr>
        </table>
    </page_footer>

</page>

A mi parecer, no hay mucho que explicar en cuanto al HTML, es simplemente una tabla que también puedes hacer con divs; lo nuevo en este archivo es que se pueden agregar estilos, hay que notar que los estilos deben estar entre los tags <style> y de comentario de HTML, es decir <!– .–> como se ve en el código.

El tanto el header como el footer son una tabla que fácilmente puedes cambiar el diseño y/o los estilos con tan solo manipular HMTL- CSS a lo que se requiera. El color de relleno se haría con un background, un border completo (o arriba, abajo, derecha, izquierda), en fin, esta es la gran ventaja que hay frente la librería FPDF.

Aquí una secuencia en imágenes hasta la salida al navegador:

index

 

formulario

encabezado_footer

 

Aquí ya puedes “jugar” y ver diferentes salidas cambiando el CSS y/o HTML 😀

Te recuerdo que puedes descargar el ejemplo completo y todo lo necesario para poder empezar a trabajar con esta librería y con comentarios en el código desde mi googleDrive 😀  También puedes ver en funcionamiento el ejemplo completo desde este enlace (solo espera 5 segundos, click en “saltar publicidad” y te lleva directo al ejemplo)

Cualquier duda o sugerencia a ringhugos@gmail.com

 
Deja un comentario

Publicado por en 7 abril, 2015 en HTML2PDF

 

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: