Portada » Descargas y ejemplos PHP » Tabla con estilos CSS en DOMPDF

Tabla con estilos CSS en DOMPDF

5
(1)
  • Versión
  • Descargar 13
  • 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.

Tabla con estilos CSS en DOMPDF
Tabla con estilos CSS en DOMPDF

Instalación de dompdf

Instalaremos dompdf usando el software composer. veamos la instrucción de código que usaremos:

composer require dompdf/dompdf

Nota:
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.

composer dompdf
composer dompdf

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>

Dompdf declaracion interna CSS
Dompdf declaracion interna CSS

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>

Dompdf declaracion externa CSS
Dompdf declaracion externa CSS

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

En 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

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 5 / 5. Recuento de votos: 1

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja una respuesta

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

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad