Generar un PDF con una tabla PHP y MySQL. Agregar información a un PDF desde HTML o utilizando MySQL, como gestor de almacenamiento es algo muy imprescindible en estos tiempos, por su versatilidad para generar reportes y facturas dinámicas que son muy necesarios para nuestros proyectos.
En este artículo veremos dos formas para crear un PDF.
Generar un PDF con una tabla PHP y MySQL
Recursos a utilizar
- Lenguaje JavaScript, para generar PDF
- Librería JsPDF
- Plugin autotable.
- Lenguaje HTML, base de nuestro sistema.
- PHP, intérprete para extraer datos de MySQL.
- Base de datos MySQL, motor almacenamiento
Obtener librerías externas
El plugin JsPDF lo descargamos de GitHub: https://github.com/MrRio/jsPDF
El plugin autotable lo bajamos de Github: https://github.com/simonbengtsson/jsPDF-AutoTable
1. Primera forma de crear PDF de manera estática
Mostrando el contenido incluyendo las librerías descargadas líneas arriba.
<head> <title>Generar PDF con JsPDF Ejemplo con AutoTable</title> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"> <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="jspdf/dist/jspdf.min.js"></script> <script src="js/jspdf.plugin.autotable.min.js"></script> <meta charset="utf-8"> </head>
El botón HTML que llama a la función que genera el PDF
<div class="col-md-4"> <p><strong>Creando PDF con JavaScript.</strong></p> <button id="GenerarPDF" class="btn btn-default">Crear PDF</button> <br> </div>
La función JavaScript que genera y contiene los datos para el PDF
<script>
$("#GenerarPDF").click(function(){
var pdf = new jsPDF();
pdf.text(20,20,"Mostrando una Tabla con JsPDF");
var columns = ["Id", "Nombre", "Email", "Pais"];
var data = [
[1, "Carlos", "009@gmail.com", "Mexico"],
[2, "Miguel", "888@hotmail.com", "Brasil"],
[3, "Jorge", "jorge@yandex.com", "Ecuador"],
[3, "mario", "mario@yandex.com", "Colombia"],
];
pdf.autoTable(columns,data,
{ margin:{ top: 25 }}
);
pdf.save('MiTabla.pdf');
});
</script>
2. Segunda Forma de crear PDF de manera dinámica
Necesitamos los siguientes recursos
- Lenguaje JavaScript, para generar PDF
- Plugin JsPDF y autotable.
- Lenguaje HTML.
- Lenguaje PHP para la conexión con MySQL
- Base de datos MySQL, para extraer los datos en el PDF
Base de Datos
CREATE TABLE IF NOT EXISTS `clientes` ( `id` int(11) NOT NULL, `nombres` varchar(140) NOT NULL, `apellidos` varchar(140) NOT NULL, `telefono` varchar(15) NOT NULL, `edad` int(11) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
Conexión con la base de datos
<?php
include "Conexion.php";
$db = connect();
$query=$db->query("select * from clientes");
$clientes = array();
$n=0;
while($r=$query->fetch_object()){ $clientes[]=$r; $n++;}
?>
Botón para generar el PDF dinámico mediante un elemento de formulario
<div class="col-md-4"> <p><strong>Ejemplo usando PHP y MySQL.</strong></p> <button id="GenerarMysql" class="btn btn-default">Crear PDF MySQL</button> <br> </div>
El código JavaScript con incrustación de PHP, para devolver los datos de MySQL.
<script>
$("#GenerarMysql").click(function(){
var pdf = new jsPDF();
pdf.text(20,20,"Mostrando una Tabla con PHP y MySQL");
var columns = ["Id", "Nombres", "Apellidos", "Telefono", "Edad"];
var data = [
<?php foreach($clientes as $c):?>
[<?php echo $n; ?>, "<?php echo $c->nombres; ?>", "<?php echo $c->apellidos; ?>", "<?php echo $c->telefono; ?>", "<?php echo $c->edad; ?>"],
<?php endforeach; ?>
];
pdf.autoTable(columns,data,
{ margin:{ top: 25 }}
);
pdf.save('MiTabla.pdf');
});
</script>
Resultado en el navegador de la segunda Forma
Conclusión
Este pequeño ejemplo muestra cómo es posible generar un PDF con el plugin jsPDF.
Por lo tanto, implementar podría ser muy fácil, pero la falta de una documentación hace que cada paso sea realmente complicado. Por tal motivo, me propuse realizarlo para que ustedes no tengan problemas.
¿Has usado jsPDF para crear PDFs? ¿Cuál fue tu experiencia?
Házmelo saber en los comentarios, gracias por su visita.
Descargar
A continuación les dejo el código para descargar este ejemplo con todos los archivos y librerías utilizadas.
Suscríbete
Les invito a suscribirte este Blog y recibir un email cada vez que publique nuevos artículos, que le ayudaran en sus proyectos que estén realizando.
no esta la liga para descargar el codigo
Hola Gustavo
Ya esta corregido el detalle de la descarga.
Saludos
El problema con jsPDF es que no acepta UTF-8 y los acentos (que se usan en idioma español) salen ÿý, hay una solución a eso?
Para solucionar eso puedes usar utf8_encode