Hoy les enseñare a crear un PDF con JsPDF, PHP y MySQL de la forma mas facil.
Este articulo y el parte del código lo utilizo del articulo anterior sobre JsPDf y ademas para hacer el crud pueden utilizar el código explicado en el articulo crud con php y msyql.
Base de datos
La base de datos de ejemplo que vamos a usar es la siguiente:
[code language=”sql”]create database jspdf3;create database jspdf3;
use jspdf3;
create table person( id int not null auto_increment primary key, name varchar(500) not null, lastname varchar(500) not null, address varchar(100) not null, phone varchar(100) not null, email varchar(255) not null, created_at datetime not null);
insert into person(name,lastname,address,phone,email,created_at) values ("Agustin","Ramos","Mexico","+5219371331142","evilnapsis@gmail.com",NOW());insert into person(name,lastname,address,phone,email,created_at) values ("Agustin 2","Ramos","Mexico","+5219371331142","xzcbnmm@gmail.com",NOW());insert into person(name,lastname,address,phone,email,created_at) values ("Agustin 4","Ramos","Mexico","+52178798798","nanana@gmail.com",NOW());insert into person(name,lastname,address,phone,email,created_at) values ("Agustin 6","Ramos","Mexico","+521123456789","qertyu990@gmail.com",NOW());
En esta base de datos incluyo algunos datos en Insert, ya que el CRUD correspondiente lo pueden o deben tomar del otro articulo, pero si gustan pueden hacer las pruebas solo con la tabla y los insert.
Codigo
El código se los dejo en un gist de Github.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
$con = new mysqli("localhost","root","","jspdf3"); | |
$sql = "select * from person"; | |
$query = $con->query($sql); | |
$data = array(); | |
while($r=$query->fetch_object()){ | |
$data[] =$r; | |
} | |
?> | |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>JsPDF Ejemplo con AutoTable – Evilnapsis</title> | |
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"> | |
<script type="text/javascript" src="jquery.min.js"></script> | |
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> | |
<script src="jspdf/dist/jspdf.min.js"></script> | |
<script src="jspdf.plugin.autotable.min.js"></script> | |
</head> | |
<body> | |
<nav class="navbar navbar-inverse navbar-static-top"> | |
<div class="container"> | |
<!– Brand and toggle get grouped for better mobile display –> | |
<div class="navbar-header"> | |
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> | |
<span class="sr-only">Toggle navigation</span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
</button> | |
<a class="navbar-brand" href="./">JSPDF</a> | |
</div> | |
<!– Collect the nav links, forms, and other content for toggling –> | |
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> | |
<ul class="nav navbar-nav"> | |
<li><a href="./">INICIO</a></li> | |
<!– | |
<li class="dropdown"> | |
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> | |
<ul class="dropdown-menu"> | |
<li><a href="#">Action</a></li> | |
<li><a href="#">Another action</a></li> | |
<li><a href="#">Something else here</a></li> | |
<li role="separator" class="divider"></li> | |
<li><a href="#">Separated link</a></li> | |
<li role="separator" class="divider"></li> | |
<li><a href="#">One more separated link</a></li> | |
</ul> | |
</li> | |
–> | |
</ul> | |
</div><!– /.navbar-collapse –> | |
</div><!– /.container-fluid –> | |
</nav> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-md-12"> | |
<h1>Ejemplo de jsPDF #3</h1> | |
<br> | |
<p>En este ejemplo usamos tablas con AutoTable, PHP y MySQL.</p> | |
<button id="generar" class="btn btn-default">Generar PDF</button> | |
<br> | |
<br> | |
<p>Powered by <a href="http://evilnapsis.com/" target="_blank">Evilnapsis</a></p> | |
</div> | |
</div> | |
</div> | |
<script> | |
$("#generar").click(function(){ | |
var pdf = new jsPDF(); | |
pdf.text(20,20,"Mostrando una Tabla con JsPDF y el Plugin AutoTable"); | |
var columns = ["Id", "Nombre", "Domicilio", "Telefono","Email"]; | |
var data = [ | |
<?php foreach($data as $d):?> | |
[<?php echo $d->id; ?>, "<?php echo $d->name." ".$d->lastname; ?>", "<?php echo $d->address; ?>", "<?php echo $d->phone; ?>","<?php echo $d->email; ?>"], | |
<?php endforeach; ?> | |
]; | |
pdf.autoTable(columns,data, | |
{ margin:{ top: 25 }} | |
); | |
pdf.save('mipdf.pdf'); | |
}); | |
</script> | |
</body> | |
</html> |
El codigo es muy similar al codigo del articulo anterior de jspdf, con algunos cambios referentes al uso de PHP y MySQL.
- Linea 2: Conexion a la base de datos mysql, los parámetros son: servidor, usuario,password y nombre de la base de datos.
- Linea 3: Consulta SQL
- Linea 4: Se ejecuta la consulta SQL
- Linea 5: Se crea una variable $data donde almacenaremos los resultados de la base de datos
- Linea 6-8: Recorremos los resultados de la base de datos, usando fetch_object() usamos objetos, y guardamos los resultados en la variable $data
- Linea 84: Definimos el orden de las columnas
- Linea 86: Creamos un foreach, donde hacemos un recorrido de los resultados
- Linea 87: Agregamos los resultados en un array según el orden correspondiente de las columnas.
- Linea 88: Terminamos el ciclo foreach
Y con eso listo, podemos ejecutar y ver el PDF generado automáticamente, después de dar click al botón Generar PDF.
Descarga
Aquí les dejo todos los archivos para que el ejemplo les funcione.
[sociallocker]Link: http://fasttory.com/11227357/jspdf-3
[/sociallocker]Cualquier duda espero sus comentarios.
No olviden suscribirse al blog y a mi canal de youtube https://youtube.com/evilnapsis/ .