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.
💡 ¿Quieres aprender más? Este artículo es parte de nuestra Recopilación de Plugins JavaScript y jQuery → donde encontrarás más de 20 tutoriales gratuitos esperándote para llevar tus habilidades al siguiente nivel.
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/jsPDFTambien el plugin autotable lo descargamos del repositorio en Github:
https://github.com/simonbengtsson/jsPDF-AutoTableEn 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-2Resultado
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.
¿Necesitas un software de ventas listo para producción?
Inventio Max es la solución profesional con soporte para múltiples almacenes, reportes avanzados y gestión de usuarios.Ver Inventio Max – Sistema de Inventario y Ventas Profesional →
Related
