Como crear un PDF con PHP y HTML: La guía definitiva.



Existen muchas formas de generar archivos PDF desde PHP, pero ahora vamos a ver en detalle cómo puedes generarlos utilizando HTML y hojas de estilo (CSS) para aplicar el formato, como si se tratara de una página web.

Instalar la librería mPDF para trabajar con PDF

Vamos a utilizar una librería llamada mPDF la cual nos permite convertir código HTML y CSS en archivos PDF, para instalarla vamos a ejecutar este comando de Composer en la carpeta en que estamos trabajando:

composer require mpdf/mpdf

Un ejemplo sencillo para generar un PDF con HTML

Ahora, en la carpeta en donde instalamos la librería, vamos a crear un archivo de PHP con este código:

<?php

require_once __DIR__ . '/vendor/autoload.php';

$mpdf = new \Mpdf\Mpdf();
$mpdf->WriteHTML('<h1>Hola mundo</h1>');
$mpdf->WriteHTML('<p>Soy un archivo PDF</p>');
$mpdf->Output();

El ejemplo es muy sencillo, solo incluimos el archivo de composer para cargar las librerías, luego creamos un objeto de la clase Mpdf y comenzamos a escribir código HTML usando WriteHTML, primero, un encabezado y luego un párrafo, finalmente usamos el método Output para generar la salida en PDF y al ejecutar el código veremos algo como esto:

Ejemplo de PDF generado con PHP y HTML

Como crear un PDF con hojas de estilo CSS

En el ejemplo anterior vimos cómo generar un PDF y mediante HTML le dimos cierto formato, el cual ya viene predeterminado según las etiquetas HTML, pero ahora vamos a agregar una tabla y le vamos a dar formato a esa tabla usando un archivo .css externo.

Primero creamos un archivo .css en este ejemplo le he llamado estilo.css y luego le agregas este código:

table.blueTable {
  border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.blueTable td, table.blueTable th {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
}
table.blueTable tbody td {
  font-size: 13px;
}
table.blueTable tr:nth-child(even) {
  background: #D0E4F5;
}
table.blueTable thead {
  background-color: : #1C6EA4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;
}
table.blueTable thead th {
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  background-color: #1C6EA4;
  border-left: 2px solid #D0E4F5;
}
table.blueTable thead th:first-child {
  border-left: none;
}

table.blueTable tfoot {
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
  background: #D0E4F5;
  background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  border-top: 2px solid #444444;
}
table.blueTable tfoot td {
  font-size: 14px;
}
table.blueTable tfoot .links {
  text-align: right;
}
table.blueTable tfoot .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}

Ahora creas otro archivo de PHP para generar el PDF, el código que he usado es este:

<?php

require_once __DIR__ . '/vendor/autoload.php';

$mpdf = new \Mpdf\Mpdf();
$stylesheet = file_get_contents('estilo.css');
$mpdf->WriteHTML($stylesheet,\Mpdf\HTMLParserMode::HEADER_CSS);

$mpdf->WriteHTML('<h1>Estilo personalizado</h1>');
$mpdf->WriteHTML('<table class="blueTable">
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
</thead>
<tbody>
<tr>
<td>cell1_1</td><td>cell2_1</td><td>cell3_1</td><td>cell4_1</td></tr>
<tr>
<td>cell1_2</td><td>cell2_2</td><td>cell3_2</td><td>cell4_2</td></tr>
<tr>
<td>cell1_3</td><td>cell2_3</td><td>cell3_3</td><td>cell4_3</td></tr>
<tr>
<td>cell1_4</td><td>cell2_4</td><td>cell3_4</td><td>cell4_4</td></tr>
</tbody>
</tr>
</table>');
$mpdf->Output();

El código es muy parecido al primero ejemplo, pero aquí hay dos líneas de código justo después de crear el objeto, la primera sirve para cargar el archivo de hojas de estilo en una variable y la segunda línea de código agrega el código CSS para que nuestro PDF lo tome en cuenta para su formato.

$stylesheet = file_get_contents('estilo.css');
$mpdf->WriteHTML($stylesheet,\Mpdf\HTMLParserMode::HEADER_CSS);

Luego cuando escribimos el código HTML para generar la tabla, le agregamos la clase blueTable, con eso es suficiente para que la tabla se genere con el formato de la hoja de estilo, justo cómo funciona el HTML al crear una página web.

Ahora, si ejecutas el programa, el PDF que se genere se verá de esta forma:

Ejemplo de PDF generado con formato mediante Hojas de estilo CSS

Como generar un PDF con imágenes

Con esta librería puedes utilizar prácticamente cualquier etiqueta HTML, al menos las más usadas, pero si deseas conocer una lista detallada, estas son las etiquetas disponibles.

Para agregar una imagen solo debes usar la etiqueta IMG, especificando la ruta de la imagen. Aquí hay un ejemplo:

<?php

require_once __DIR__ . '/vendor/autoload.php';

$mpdf = new \Mpdf\Mpdf();

$mpdf->WriteHTML('<h1>Mostrando una imagen</h1>');
$mpdf->WriteHTML('<img src="nala.png" width="100px"/>');
$mpdf->Output();

Al ejecutarlo verás algo como esto: (esa imagen es de Nala una bebé llorona, a mi hija le encanta ese programa.)

Ejemplo de PDF generado con PHP y mostrando una imagen, la libreria que uso es mpdf.

Configuración de la página.

Al crear el objeto de la clase Mpdf podemos definir parámetros adicionales, por ejemplo, podemos decir cuál será el ancho y alto de la hoja en milímetros. También en cualquier momento podemos usar el método addpage para agregar un salto de página (nueva hoja) y si le pasamos el parámetro “L” la nueva hoja estará en formato horizontal.

Aquí hay un ejemplo del código que puedes utilizar.

<?php

require_once __DIR__ . '/vendor/autoload.php';

// En format se envia el ancho y largo en milimetros
$mpdf = new \Mpdf\Mpdf(['mode' => 'utf-8', 'format' => [75, 100]]);

$mpdf->WriteHTML('<h1>Configuración de página</h1>');
$mpdf->WriteHTML('<p>Pagina 1</p>');

// Si al agregar una pagina pasamos el parametro L 
// la nueva pagina estara con orientacion horizontal (acostada)
// si no enviamos parametro saldra de forma vertical (predeterminado)
$mpdf->addpage('L');
$mpdf->WriteHTML('<p>Pagina 2</p>');

$mpdf->Output();
Configuración de paginas al generar PDF

Crear encabezado, pie de página y números de página.

Finalmente, voy a mostrarte como agregar encabezados y pies de página a tu PDF y a colocar el número de cada página.

Para agregar un encabezado se usa el método SetHTMLHeader y para pie de página se usa SetHTMLFooter. Estos deben colocarse al inicio, antes de enviar cualquier otro comando. Para imprimir el número de página se usa {PAGENO} y para imprimir la cantidad de páginas se usa {nb}

Aquí hay un ejemplo que puedes tomar:

<?php

require_once __DIR__ . '/vendor/autoload.php';

$mpdf = new \Mpdf\Mpdf();
$mpdf->SetHTMLHeader('Encabezado');
$mpdf->SetHTMLFooter('Pag. {PAGENO} de {nb}');

$mpdf->WriteHTML('<h1>Hola mundo</h1>');
$mpdf->WriteHTML('<p>Soy un archivo PDF</p>');


$mpdf->Output();
Como generar PDF con encabezado y pie de pagina.

El pie de página y encabezado admite código HTML, puedes darle formato con hojas de estilo para adaptarlos a tus necesidades.

Hasta aquí llega esta guía, si tienes alguna duda sobre como crear archivos PDF usando PHP y HTML, puedes dejarme un comentario al final.

Deja una respuesta

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

5 Comments

  1. Avatar de victoria santana
    victoria santanasays:

    me da este error:

    Internal Server Error
    include(./mpdf/mpdf_config.inc.php): failed to open stream: No such file or directory

  2. Avatar de Dani

    Hola, gracias por el tutorial.
    ¿Saber de alguna manera de incluir fórmulas matemáticas con LaTez?
    Gracias de antemano y saludos.
    Dani

  3. Avatar de julian

    Hola Gracias por la Info, como Puedo incluir una Variable PhP en el WriteHTML para generar reportes Dinámicos ? ejemplo incluir la Variable $Cell_1 ya probe con pero da error

    1. Avatar de Luis Cruz

      Debes ingresar una cadena de texto, pero la cadena puede ser dinamica, por ejemplo ‘Soy un texto’ . $Cell_1
      Es decir, ahi usé un punto para unir la variable a la cadena texto que tenías, también podrías usar algo como
      WriteHTML($Cell_1);