[Javascript] Agregar una Tabla en un PDF con JsPDF y el plugin Autotable

Agregar una Tabla en un PDF es algo muy necesario al crear reportes, les mostrare una de las formas mas faciles para crear un PDF usando Javascript, el plugin JsPDF y el plugin autotable.

El plugin Autotable es un plugin que para funcionar necesita del plugin JSPDF, asi que necesitamos los 2.

El plugin JsPDF lo obtenemos del repositorio en GitHub: https://github.com/MrRio/jsPDF

Tambien el plugin autotable lo descargamos del repositorio en Github: https://github.com/simonbengtsson/jsPDF-AutoTable

En un Post anterior ya hable sobre como crear un PDF basico con JsPDF, les invito a leerlo.

Codigo

[code language=”javascript”]

var pdf = new jsPDF();
pdf.text(20,20,"Mostrando una Tabla con JsPDF y el Plugin AutoTable");

var columns = ["Id", "Nombre", "Email", "Pais"];
var data = [
[1, "Hola", "hola@gmail.com", "Mexico"],
[2, "Hello", "hello@gmail.com", "Estados Unidos"],
[3, "Otro", "otro@gmail.com", "Otro"] ];

pdf.autoTable(columns,data,
{ margin:{ top: 25 }}
);

pdf.save(‘mipdf.pdf’);

[/code]

Explicacion

En la primera linea creamos una instancia al plugin JsPSF y en la segunda linea creamos un texto, cosa que ya vimos en el post anterior.

Luego necesitaremos crear las filas y las columnas de datos, fácilmente esto lo hacemos usando arrays.

El primer array corresponde a las columnas y el segundo a las filas.

Es posible agregar o quitar columnas o filas, simplemente modificando los arrays, recuerden que si en columnas hay 7 columnas, en cada fila deben haber 7 espacios, todo debe coincidir.

Después llamamos al método pdf.autoTable y le pasamos como parámetro las filas, las columnas y las opciones.

Como opciones en este caso solo se agrega un margen superior.

Por ultimo le colocamos un nombre con el cual vamos a descargar el archivo que se va a generar.

Descargar

A continuación les dejo el código para descargar el ejemplo con todos los archivos.

Link: http://twineer.com/11227357/jspdf-2

Resultado

Suscribete

Les invito a suscribirte a mi canal y recibir un email cada vez que publique nuevos articulos, proyectos, tutoriales, etc.

Tambien les invito a enviarme una donacion para apoyar mis contenidos y proyectos.