Crear PDFs a partir de un HTML con CSS mediante PHP y Dompdf

En este tutorial os enseñaré cómo mostrar al usuario PDFs generados dinámicamente mediante PHP para tu aplicación web. Vamos a utilizar librería de terceros llamada Dompdf que nos permite crear PDFs y guardarlos en el servidor directamente, para luego mostrarlos utilizando solo HTML y CSS.

Para empezar, vamos a instalar Dompdf. La forma más sencilla de añadir DOMPDF en tu proyecto es utilizar Composer. Si quieres saber cómo instalar Composer, ve a https://getcomposer.org/download/. Una vez que lo tengas instalado en tu máquina, puedes navegar hacia el directorio donde se encuentra tu aplicación web (por lo general con el comando cd) a través de la línea de comandos/terminal y escribe composer require dompdf/dompdf. Esto instalará Dompdf y ya solo tienes que incluirlo en los archivos que quieras y utilizarlo. Composer es un gestor de dependencias similar a npm para Node.js pero para PHP, y muy buena idea utilizarlo. Si no deseas utilizar Composer, puedes descargar directamente la librería Dompdf desde https://github.com/dompdf/dompdf/releases y descomprimirlo en la carpeta que quieras.

Una vez que tengas instalado Dompdf, vamos a crear una plantilla HTML sencilla para mostrarla al usuario como un PDF. Abajo tienes un archivo PHP que servirá para la plantilla del PDF. Es una factura ficticia de un pedido online. Esperamos un array $order que contendrá valores clave del PDF, tales como el nombre del usuario, el nombre del producto solicitado, su precio, la fecha prevista de entrega y muchos datos más. El script PHP se limitará a mostrar algo de HTML y lo llenará con los valores generados dinámicamente relacionados con el pedido en cuestión. Fíjate que la plantilla también carga Bootstrap y en que se define un style que resaltará los valores generados dinámicamente dentro de la factura. La etiqueta style también carga una fuente personalizada de Google Fonts que utilizaremos en la factura.

Pdf-template/template.php

<?php

if (!isset($order)) die();

?>

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

<style>

/* LOAD GOOGLE FONT */

/* latin-ext */

@font-face {

  font-family: 'Oxygen';

  font-style: normal;

  font-weight: 400;

src: local('Oxygen'), local('Oxygen-Regular'), url(https://fonts.gstatic.com/s/oxygen/v5/IIPDrwV5KNJo5-LaFlLy2fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');

unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;

}

/* latin */

@font-face {

  font-family: 'Oxygen';

  font-style: normal;

  font-weight: 400;

src: local('Oxygen'), local('Oxygen-Regular'), url(https://fonts.gstatic.com/s/oxygen/v5/78wGxsHfFBzG7bRkpfRnCQ.woff2) format('woff2');

unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;

}

* {

  font-family :"Oxygen" !important;

}

.order-detail {

  font-weight: bolder;

}

.name {

  text-transform: capitalize;

}



.product, .product-price {

  color: #35aa45;

}

</style>

<div class="container-fluid">

<div class='panel panel-success'>

<div class='panel-heading'>

      Thank you for your order <span class='order-detail name'><?phpecho $order['name']; ?></span>!

</div>

<div class='panel-body'>

<p class='lead'>You ordered <span class='order-detail product'><?php echo $order['productName'];?></span> valued at

<span class='order-detail product-price'><?php echo $order['productPrice'];?>$</span>.</p>

<hr>

<small>The expected delivery date of the product is <span class='order-detail delivery'><?php echo $order['deliveryDate'];?></span></small>

</div>

</div>

</div>

Ahora, para mostrar el PDF al usuario vamos a crear un array order y a rellenarlo con los valores relacionados con el pedido. Después, crearemos una plantilla utilizando la salida del buffer para almacenar los contenidos de la plantilla en una variable.

Index.php

$order = array("name" => "Ivan Dimov", "productName" => "Waterproof portable speakers", "productPrice" => "20", "deliveryDate" => "2150");

ob_start();

require_once("pdf-template/template.php");

$template = ob_get_clean();

Ahora cargaremos las dependencias de nuestro Composer (Composer crea una carpeta con un fichero autoload.php que carga todas las librerías cargadas con Composer cuando lo necesites)

Index.php

require_once("vendor/autoload.php");

Si no has utilizado Composer no te preocupes, Dompdf cuenta con un autoloader. La declaración del require debe ser algo así como: require_once ‘dompdf/autoload.inc.php’; modificando, eso sí, la ruta por la de tu proyecto.

Después de haber cargado Dompdf, todo lo que tenemos que hacer es pasarlo a la plantilla HTML y mostrar el PDF en el navegador del usuario. Inicializamos la clase Dompdf, le pasamos la plantilla HTML (la variable $template) y enviamos el PDF al navegador otorgándole el nombre de invoice.pdf.

Index.php

use DompdfDompdf;
 
$dompdf = new Dompdf();
 
$dompdf->loadHtml($template);
 
$dompdf->setPaper('A4', 'landscape');
 
$dompdf->render();
 
$dompdf->stream("invoice");

Si queremos guardar el archivo PDF, necesitamos solamente 1 o 2 líneas más de código. Obtenemos una cadena con el contenido del archivo PDF utilizando $dompdf->output(), lo guardamos en una variable o directamente la ponemos dentro de un archivo con el nombre que quieras.

Una línea es suficiente para guardar el archivo PDF en nuestro servidor:

file_put_contents("pdfs/invoice-" . mt_rand(0,99999) . ".pdf",  $dompdf->output());

Fuente: phpgang.com

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.