Tabla con estilos CSS en DOMPDF
- Versión
- Descargar 378
- Tamaño del archivo 3.92 MB
- Recuento de archivos 1
- Fecha de creación 12 enero, 2024
- Última actualización 12 enero, 2024
Tabla con estilos CSS en DOMPDF. Veremos 2 formas de agregar estilos para generar un documento PDF usando la librería DOMPDF con PHP
Tabla con estilos CSS en DOMPDF
Aplicaremos estilos dinámicos a nuestros documentos PDF creados con PHP, específicamente a las tablas HTML. Si embargo, usaremos la declaración interna y externa de estilos CSS y habilitar la inclusión de ficheros remotos dentro de nuestro PDF.
Instalación de dompdf
Instalaremos dompdf usando el software composer. veamos la instrucción de código que usaremos:
composer require dompdf/dompdfNota:
Si estamos trabajando con la librería DOMPDF es importante ejecutar la anterior instrucción de código para que descargue la última versión de la librería. Recuerda, si no sabes usar Composer, mira este post acerca de composer.
Es importante que después de instalar dompdf incluir el autoload, veamos un ejemplo:
include_once "./vendor/autoload.php";Una vez realizado los pasos anteriores podemos crear ejemplos usando tablas HTML, etc.
Primer Ejemplo: Estilos declaración interna
Crearemos un archivo de nombre index_tabla.php que será el encargado de llamar a la librería e incluir al fichero que tendrá los contenidos HTML
<?php
include_once "./vendor/autoload.php";
use DompdfDompdf;
$dompdf = new Dompdf();
ob_start();
// Incluimos el fichero del contenido a imprimir
include "./tabla.php";
$html = ob_get_clean();
$dompdf->loadHtml($html);
$dompdf->render();
header("Content-type: application/pdf");
header("Content-Disposition: inline; filename=documento2.pdf");
echo $dompdf->output();
?>Fichero tabla.php
Contendrá el contenido que se mostrara en el PDF impreso
<?php
$paises = ["Argentina", "Brasil", "Colombia", "Ecuador", "Venezuela"];
?>
<style>
table { border-collapse: collapse;}
table,th,td {border: 1px solid black;}
th,td {padding: 6px;}
th{ background:#5E5151; color:white}
</style>
<h3>Paises</h3>
<table>
<thead>
<tr>
<th>Nro.</th>
<th>Nombre Pais</th>
</tr>
</thead>
<tbody>
<?php $n = 0; foreach ($paises as $pais) {$n++;?>
<tr>
<td><?php echo $n; ?></td>
<td><?php echo $pais; ?></td>
</tr>
<?php }?>
</tbody>
</table>
Segundo Ejemplo: Estilos declaración externa
Para este ejemplo usaremos el framework bootstrap 4 para darle estilos a las tablas HTML y textos de nuestro contenido. Veamos el ejemplo.
Creamos un fichero de nombre index_tabla_bootstrap.php para nuestro segundo ejemplo.
<?php
include_once "./vendor/autoload.php";
use DompdfDompdf;
$dompdf = new Dompdf(['enable_remote' =>true]);
ob_start();
// Incluimos fichero de contenido con estilos externos
include "./tabla_con_estilos.php";
$html = ob_get_clean();
$dompdf->loadHtml($html);
$dompdf->render();
header("Content-type: application/pdf");
header("Content-Disposition: inline; filename=documento1.pdf");
echo $dompdf->output();
?>Fichero tabla_con_estilos.php
<?php
$paises = ["Argentina", "Brasil", "Colombia", "Ecuador", "Venezuela"];
?>
<head>
<link rel="stylesheet" href="http://<?php echo $_SERVER['HTTP_HOST']; ?>/extras/dompdf_con_estilos/bootstrap/css/bootstrap.min.css">
</head>
<h3>Paises</h3>
<table class="table table-bordered table-sm" style="width:300px">
<thead>
<tr class="table-secondary">
<th>Nro.</th>
<th>Nombre Pais</th>
</tr>
</thead>
<tbody>
<?php $n = 0; foreach ($paises as $pais) { $n++;?>
<tr>
<td><?php echo $n; ?></td>
<td><?php echo $pais; ?></td>
</tr>
<?php }?>
</tbody>
</table>
Nota:
En este ejemplo estamos usando ficheros de estilos con extensión
.CSS. Sin embargo, es vital habilitar ficheros remotos para que la librería DOMPDF interprete al archivo de manera correcta.
Ejemplo:
En nuestro proyecto tenemos la siguiente ruta:
dompdf_con_estilos/vendor/dompdf/dompdf/src/Options.phpEn la linea 119 de este fichero encontraremos una configuración en el cual nos permitirá incluir ficheros externos, ejemplo.
private $isRemoteEnabled = false;Debemos de habilitar a TRUE para que funcione y guardar los cambios. Sin embargo para evitar tal configuración podemos apoyarnos de la siguiente manera para habilitarlos.
En nuestro archivo de generación de PDF busquemos la siguiente instrucción
$dompdf = new Dompdf();Y solo debemos de agregarle ['enable_remote' =>true] dentro de los paréntesis y quedaría de la siguiente manera.
$dompdf = new Dompdf(['enable_remote' =>true]);Para finalizar:
Recordemos que BootStrap y dompdf no son compatibles al 100%, la versión que más compatibilidad posee es con BootStrap 3.3.7, es posible que versiones superiores como ser BootStrap 5 tengan incompatibilidades.
Hemos aprendido a habilitar enable_remote en nuestro proyecto para que DOMPDF acepte ficheros externos y/o imágenes.
Pueden visitar mi repositorio en github acerca de este tema.
Descargar