RSS

PDF desde PHP: Página en blanco (2/5)

07 Abr

En este primera parte vamos a diseñar un index donde se nos mostrará un link que nos llevará hacia un formulario. En dicho formulario habrá algunos campos y el botón de submit, donde la única función de éste, será dar salida a un PDF con una hoja en blanco al navegador.

html2pdf_logo1_big

 


Por cuestión de que el código sea más legible, el código que muestro aquí en cada post, le he quitado comentarios, además el archivo CSS no lo pongo ya que es largo y no interviene nada en el código que nos interesa. En el código del proyecto completo que puedes descargar desde mi googleDrive 😀, ahí lo tengo todo comentado para ayudar a comprender qué hace cada parte, en especial, lo de HTML2PDF que como he mencionado antes, no viene explicado en el sitio oficial de esta librería y con todo el CSS.

Comencemos con el index.php:

<!DOCTYPE html>
<html>
	<head>
        <title>PDF en PHP</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/estilos.css">
	</head>

	<body>

	<div class="wrap">
            <header id="header_main">
				PDF desde PHP con HTML2PDF
				<div style="margin:0 auto; width:200px"><img src="images/logoSS.png"></div>
			</header>

            <section id="left">
				<div class="menu">
					<a href="php/formulario.php" target="_blank">
						<div class="inside"><img src="images/icono_pdf.jpg"></div>
						<div class="titulo"><span>Crear PDF</span></div>
					</a>
				</div>
			</section>

     </div>
	</body>
</html>

Aplicando CSS se verá así (en el proyecto completo también viene el CSS responsive):

index

La imagen es un link que cuando se de click, nos llevará al siguiente formulario que está en php/formulario.php

<!DOCTYPE html>
<html>
	<head>
        <title>PDF en PHP</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="../css/estilos.css">
	</head>

    <body>
        <div class="wrap">
            <header id="header_main">
                <div style="margin:0 auto; width:200px"><img src="../images/logoSS.png"/></div>
                <h2>Formulario para generar PDF</h2>
            </header>

            <section id="formulario">
                <form  method="post" action="php/pdf_blanco.php" target="_blank">
                        <div id="generar">
                            <p>Generar formato a matricula</p>
                            <input type="text" name="matricula">
                        </div>
                        <div id="fecha">
                        <p>México D.F. a</p>

                          <select name="dia" id="dia">
                            <option selected>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                            <option>7</option>
                            <option>8</option>
                            <option>9</option>
                            <option>10</option>
                            .
                            .
                            .
                            <option>31</option>
                          </select>

                          <p class="de">de</p> 

                          <select name="mes" id="mes">
                            <option>Enero</option>
                            <option>Febrero</option>
                            <option>Marzo</option>
                            .
                            .
                            .
                            <option>Diciembre</option>
                          </select>

                          <p class="de">de</p> 

                          <select name="anio" id="anio">
                            <option>2013</option>
                            <option>2014</option>
                            <option>2015</option>
                            <option>2016</option>
                            <option>2017</option>
                          </select>
                    </div>

                        <input name="buscar" type="submit" class="generarBorrar" value="Generar PDF" >
                        <input type="reset" value="Borrar" class="generarBorrar">

                </form>
            </section>
        </div>
    </body>
</html>

Se verá así:

formulario

 

Ahora bien, este formulario tiene en el action a pdf/pdf_blanco.php que es el archivo que veremos a continuación y es el que se encarga de generar el PDF, este archivo contiene lo siguiente:

<?php
//En los comentarios del código para descargar
//están explicadas a detalle las siguientes líneas
	ob_start();
    include(dirname(__FILE__).'/vistas/pdf_blanco.php');
    $content = ob_get_clean();

    //Se obtiene la librería
    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;
    }
?>

En resumen, este código hace estos 3 pasos:

  1. Carga el HTML de un archivo que está en vistas, líneas 4, 5 y 6.
  2. Carga la librería HTML2PDF, línea 9.
  3. Genera el PDF, líneas de la 11 a 21.

El archivo que manda a llamar y tiene el HTML está en php/pdf/vistas/pdf_blanco.php y contiene lo siguiente:

<!-- Con <page> se define una hoja con los márgenes que
   que se muestran -->
<page backtop="10mm" backbottom="10mm" backleft="10mm" backright="20mm">

</page>

En este caso, aún no tiene nada de HTML, solo el tag <page> que define la hoja. Los siguientes tags a usar serán <page_header> y <page_footer> en el siguiente tuto.

Al clickar en “Generar PDF” del formulario, se abrirá una pestaña nueva con el PDF con una hoja en blanco:

pdf_blanco

 

De esta forma terminamos este primer acercamiento a la librería HTML2PDF. Espero que no haya sido tan enredado 😛 Ya viendo los ejemplos que vienen te darás cuenta lo fácil que resulta usarla.

Puedes ver el ejemplo completo funcionando en este enlace. (solo espera 5 segundos, click en “saltar publicidad” y te lleva directo al ejemplo)

Anuncios
 
Deja un comentario

Publicado por en 7 abril, 2015 en HTML2PDF

 

Etiquetas:

Responder

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: