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

0

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


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

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here