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:

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:

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.)

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();

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();

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.