 |
| Manipulación de archivos excel con AngularJS |
Una práctica muy común en aplicaciones de escritorio, es el trabajo con documentos Excel para generar informes como una forma de salvar los datos generados por la aplicación de manera ordenada. Pero con el auge en la utilización de las aplicaciones web debido a sus ventajas, es importante saber manejar este tipo de documentos en este nuevo entorno de trabajo utilizando las tecnologías web.
En esta ocasión vamos a ver cómo trabajar con un archivo excel y realizar varias operaciones con este como:
- Cargar y acceder a los datos del documento.
- Visualizar los datos.
- Modificar los datos.
- Salvar los datos en un documento excel.
➤ Tecnologías que vamos a utilizar
Para esto vamos a utilizar ese fantástico framework que es AngularJS que nos ayudará a lograr que la sensación de trabajar en nuestra aplicación web sea muy parecida a la de trabajar en una aplicación de escritorio.
Estaremos utilizando las siguientes tecnologías:
- Angular v1.6
- JS-XLSX v0.8.0 (https://github.com/SheetJS/js-xlsx)
- FileSaver v1.3.2 (https://github.com/eligrey/FileSaver.js/)
- Angular-JS-XLSX v0.0.2 (https://github.com/brexis/angular-js-xlsx)
- Angular Material Icons v0.7.1 (https://klarsys.github.io/angular-material-icons/#)
- Angular-Contenteditable v0.3.8 (https://github.com/akatov/angular-contenteditable)
- Bower v1.7.9
bower install
En el archivo index.html ya están especificadas las rutas hacia las dependencias que descargamos con Bower.
➤ Cargar el fichero excel
Como fichero de ejemplo para trabajar con la aplicación utilizaremos uno de los informes que genera para nuestra consulta el sitio TSP Data Portal, que nos brinda diferentes estadísticas sobre problemas medioambientales, indices de contaminación y generación de energía eléctrica a nivel mundial.
Vamos a crear ahora la funcionalidad para buscar el documento Excel y leer los datos contenidos en este. Para esto nos apoyamos en dos librerías JS-XLSX y Angular-JS-XLSX, que nos dan varias facilidades para poder cargar los archivos excel; incluyendo la posibilidad de buscarlos o de arrastrar y soltar.
Creamos entonces un espacio para cargar el archivo excel. Este estará compuesto por dos opciones, un área para arrastrar y soltar el fichero, y un área para buscar el archivo en el equipo mediante un examinar. Cualquiera de las dos vías pueden ser utilizadas para cargar el excel en nuestra aplicación web.
El área para arrastrar y soltar (drag and drop) la conformaremos mediante estilos CSS y el comportamiento lo manejaremos mediante JavaScript (JS). Una vez detectado que el usuario a arrastrado y soltado un fichero excel sobre el área designada, se procede a leer la información contenida en el archivo y se muestra el nombre del fichero cargado. En caso de que el fichero no sea un documento excel, se trata como un error y se notifica al usuario mediante un mensaje.
La otra vía para cargar el fichero excel es mediante la búsqueda en el equipo. Para esto nos apoyamos de las líbrerías JS-XLSX y Angular-JS-XLSX. También restringimos el tipo de documentos que queremos visualizar cuando estemos buscando en el equipo a solo documentos Excel.
Tanto para el área de arrastrar y soltar como para el área de buscar el archivo en el equipo hacemos uso de la librería Angular Material Icons que nos permite insertar iconos de manera sencilla en nuestros componentes.
➤ Visualizar los datos
Para mostrar los datos contenidos en el documento Excel mediante Angular los mostraremos en forma de tabla. En el área del HTML haremos uso de la directiva ngRepeat. La mayoría de los ejemplos en Internet para generar tablas mediante esta directiva tienen en cuenta que conocen los encabezados que conformarán las columnas de las tablas y por ende, el número de columnas. Con el fin de que nuestra aplicación sea de propósito general, y pueda cargar y mostrar cualquier archivo excel sin que este tenga que tener un formato en específico utilizaremos dos ngRepeat anidados, uno para generar los títulos de las columnas y otro para el contenido de cada columna.
En nuestro JS a la función read() es a la que le pasamos el objeto que contiene toda la información de documento Excel. Primero que todo, en este caso solo vamos a leer la primera hoja del documento Excel, por lo que capturamos su nombre. Después convertimos la información contenida en la hoja perteneciente al documento Excel cuyo nombre coincida con la que guardamos a formato JSON. De esta forma podemos trabajar de forma más fácil con la información y vamos actualizando el $scope referente a los elementos de la tabla que se visualiza en el HTML.
 |
| Ejemplo de funcionamiento de la App |
➤ Realizar una operación con los datos
Ahora que ya visualizamos la información del documento Excel en una tabla, vamos a habilitar para que podamos realizar modificaciones a los datos mostrados. Para esto vamos a hacer uso del atributo para HTML5 contenteditable, este permite darle permiso al usuario para modificar el contenido de un elemento. Pero como en este caso el elemento que queremos que el usuario pueda modificar se genera mediante $scope, debemos añadir la directiva contenteditable perteneciente a la librería Angular-Contenteditable de la que vamos a hacer uso. De esta forma el usuario puede modificar el contenido de cualquier celda de la tabla excepto los encabezados de cada columna.
En el próximo artículo, veremos como generar un nuevo documento Excel con el contenido del documento que cargamos y que guarde la información que pudieramos haber modificado de este. Estén atentos al próximo artículo y cualquier duda o sugerencia sus comentarios son bien aceptados.
Sign up here with your email
Déjame saber cualquier duda, sugerencia o experiencia al respecto. ¡Espero tú opinión! También puedes comentar como anónimo. ConversionConversion EmoticonEmoticon