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.