JavaScriptLenguaje PHP

Generar un PDF con una tabla PHP y MySQL

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>
Crear PDF con JavaScript
Crear PDF con JavaScript

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

Crear PDF PHP y MySQL
Crear PDF PHP y MySQL
Generar un PDF con una tabla PHP y MySQL
Generar un PDF con una tabla PHP y MySQL

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.

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

4 comentarios

Deja una respuesta

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

Botón volver arriba