Exportar tabla HTML a PDF

KumbiaPHP y mPDF

En esta segunda parte veremos como exportar una tabla HTML a PDF usando la librería mPDF. Si no has visto la primera parte este es el primer artículo: Crear PDF usando HTML donde aprendimos a crear un PDF usando partials y funciones en un modelo.

Para que tengamos algo de más contenido este ejemplo está basado en el proyecto Paginación en PHP fácil y rápida y la idea es añadir un enlace que nos permita descargar en una tabla el listado de usuarios en un archivo PDF.

Template PDF

Un template permite ahorrar código que se repite en la vistas, permitiendo así un fácil mantenimiento y separación del contenido. Realizará la carga de librería, la cabecera y el pié de página y por supuesto el contenido que queremos mostrar.

Para los que aun no han visto el tema de templates en KumbiaPHP o tienen dudas de su funcionamiento los invito a leer la sección sobre el manejo de vistas en KumbiapHP. A continuación el código completo del template y más abajo con capturas se explica cada parte importante.

Archivo: default/app/views/_shared/templates/pdf.html

<?php
// Require composer autoload
require_once APP_PATH . '../../vendor/autoload.php';

use Mpdf\Mpdf;
use Mpdf\HTMLParserMode;
use Mpdf\Output\Destination;

// Nombre de fichero por defecto
if (! isset($fileName)) {
    $fileName = "Report-de-$controller_name";
}

// Título por defecto
if (! isset($title)) {
    $title = "Report de $controller_name";
}

// CSS por defecto
if (! isset($css)) {
    $css = 'css/pdf.css';
}

//Activa el almacenamiento en búfer de la salida
ob_start();

?>
<html>
    <head>
        <title><?= $title ?></title>
    </head>
    <body>
        <htmlpageheader name="myHeader1">
            <div class="title-header"><?= $title ?></div>
        </htmlpageheader>

        <?php View::content() ?>

        <htmlpagefooter name="myFooter1">
            <table width="100%" class="table_footer">
                <tr>
                    <td width="50%">{DATE d/m/Y}</td>
                    <td width="50%" style="text-align: right; ">{PAGENO}/{nbpg}</td>
                </tr>
            </table>
        </htmlpagefooter>
    </body>
</html>
<?php
$html = ob_get_clean();
ob_clean();

// Crea una instancia de la clase y le pasa el directorio temporal
$mpdf = new Mpdf(['tempDir' => APP_PATH . 'temp/mpdf', 'margin-top' => 30]);

// Carga el CSS externo
$stylesheet = file_get_contents($css);
$mpdf->WriteHTML($stylesheet, HTMLParserMode::HEADER_CSS);

// Escribe el contenido HTML (Template + View):
$mpdf->WriteHTML($html);

// Obliga la descarga del PDF
$mpdf->Output("$fileName.pdf", Destination::DOWNLOAD);

Como pueden ver lo primero que realiza, si es que no se hace en otra parte del proyecto es cargar el autoload de composer, para tener disponible mPDF y se ejecuta la función ob_start(). «Esta función activará el almacenamiento en búfer de la salida. Mientras dicho almacenamiento esté activo, no se enviará ninguna salida desde el script (aparte de cabeceras); en su lugar la salida se almacenará en un búfer interno.»

Require composer autoload

Si desean conocer como agregar encabezados y pies de páginas con mPDF un compañero realizó un manual en la Wiki de KumbiaPHP que muestra como agregarlos usando las funciones explicadas en el artículo anterior: Exportar a PDF con cabecera y pie de pagina

Ahora en el <body> definimos el contenido de la cabecera y el pie de página, y entre ellos la función View::content() que nos permite mostrar el contenido de la vista.

HTML para el header y el footer del PDF

mPDF maneja sus propias etiquetas, van entre llaves {} y usamos algunas de ellas:

  • DATE: Para mostrar la fecha actual
  • PAGENO: Número de la página
  • nbpg: Número total de páginas del documento

Y la parte final del template es la que se encarga de añadir el css, juntar el template con la vista, generar el PDF con ese contenido y hacer que el documento se descargue.

Controlador PHP

Vamos a crear una nueva vista y para ello empezamos con el método que llamaremos pdf() en el controlador user_controller.php El código se encuentra explicado entre líneas.

Archivo: default/app/controllers/user_controller.php

public function pdf()
{
    //Usa el tempalte 'pdf'
    View::template('pdf');
    //Modifica el nombre del archivo a descargar
    $this->fileName = 'listado-de-usuarios';
    //$this->css = 'css/otropdf.css'; //Usar otro css
    //Modifica el título del documento PDF en la cabecera
    $this->title = 'Listado de usuarios';
    $this->data = (new User)->find();
}

Vista HTML

Ahora crearemos la vista la cual tendrá la tabla recorriendo uno a uno los registro de la consulta realizada por el modelo en el controlador.

Archivo: default/app/views/user/pdf.phtml 

<?php if (count($data) < 1) : ?>
    <h2>No hay ningún registro</h2>
<?php else : ?>
    <table class="report">
        <thead>
        <tr>
            <th>Nombre</th>
            <th>Edad</th>
            <th>Correo</th>
        </tr>
        </thead>
        <tbody>
        <?php foreach ($data as $item) : ?>
            <tr>
                <td><?= $item->name ?></td>
                <td><?= $item->age ?></td>
                <td><?= $item->email ?></td>
            </tr>
        <?php endforeach ?>
        </tbody>
    </table>
<?php endif ?>

No hace falta explicar mucho más de la vista anterior ya que es una vista normal en KumbiaPHP, esta vista es reutilizable por ejemplo si se quiere pasar a un documento Excel o devolver la vista mediante AJAX.

Enlazar al reporte PDF

Y en donde queramos que esté el enlace al reporte PDF simplemente lo añadimos a la vista deseada, nosotros lo haremos por ejemplo en el listado de usuarios:

Archivo: default/app/views/user/page.phtml 

<?= Html::linkAction('pdf', 'Reporte PDF', 'class="button"') ?> 

Y obtenemos el siguiente resultado en la vista:

Enlace "Reporte PDF" en el listado de usuarios.

Y al pulsar el botón visualizaremos el documento PDF como el siguiente:

Listado de usuario en PDF

Descargar código completo

Como siempre, el código completo está disponible para todos en el siguiente repositorio en Github listo para usar con Docker: https://github.com/henrystivens/export-table-html-to-pdf


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

© Kumbia Team