Evilnapsis

Programming, Hacking and More

Examples

Crear un PDF con JsPDF, PHP y MySQL

Agustin Ramos

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());

[/code]

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.


<?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>

view raw

jspdf3.php

hosted with ❤ by GitHub

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

Agustin Ramos

Desarrollador de Software

Leave a Reply