Manejo de un documento Excel con AngularJS (Parte 2)

Guardando los cambios hechos al documento Excel
Guardando los cambios hechos al documento Excel
En el artículo anterior vimos como manipular un archivo Excel con AngularJS. Ahora vamos a ver cómo poder guardar los cambios realizados a la información generando un nuevo documento Excel que conserve la misma estructura de los datos y que contenga los cambios realizados. Esta nueva funcionalidad la pueden encontrar en el repositorio Github del Blog correspondiente a este artículo.

Primero debemos hacer algunos cambios al método read () en nuestro archivo app.js, encargado de la lectura del documento Excel y de obtener los datos que se muestran en  nuestra web. Lo que vamos a añadirle va a hacer una nueva columna de nombre "rowIndex"  a cada fila que contendrá como valor el número de la fila.

En la vista en el archivo index.html vamos  a realizar algunos cambios también. En el primer ng-repeat encargado de mostrar los títulos de las columnas del Excel, vamos a añadir un ng-if cuya función va a ser mostrar todos los títulos excepto el de la columna que creamos anteriormente y que almacena el número de cada fila.

En el segundo ng-repeat que muestra todos los valores correspondientes a cada columna vamos a añadir el atributo id a cada celda, conteniendo el índice que nos da $index. Y mediante ng-change vamos a poder estar al tanto de cualquier cambio que se haga a el valor de alguna celda. Para poder hacer uso de ng-change tenemos que añadir también ng-model. En el caso de las filas representadas en el elemento <tr> le añadiremos también el atributo id cuyo valor será, el que nos devuelve la columna "rowIndex" que añadimos en nuestro controlador.

Con ng-change detectamos cada vez que se hace un cambio en una celda e invocamos a la función changedCeld(val, $event) a la que le pasamos el valor nuevo de la celda y el elemento que está siendo modificado. Esta función se encargará de obtener el id de la fila y de la celda, y con esos datos conformar la posición de la celda en el excel y actualizar el valor con los cambios realizados.


Guardar los datos y salvarlos en un archivo Excel

Para salvar la información en un nuevo documento Excel con los posibles cambios realizados, vamos a apoyarnos de la librería FileSaver y de la función auxiliar write() de la librería JS-XLSX. También vamos a generar el nombre del archivo con la fecha y la hora a la que se realiza la salva. Este trabajo lo realizará la función saveData() que se activará una vez hecho clic en el botón Salvar, generando el documento Excel y dándonos la opción de guardarlo.

Es todo hasta aquí, hay muchas más opciones y elementos que podemos tener en cuenta para el trabajo con documentos Excel según los requisitos. De forma general hemos visto los más importantes que nos ayudarán en el trabajo con ficheros Excel utilizando AngularJS. Cualquier duda o sugerencia puden dejar un comentario al final del artículo, gracias.
Último

Déjame saber cualquier duda, sugerencia o experiencia al respecto. ¡Espero tú opinión! También puedes comentar como anónimo. ConversionConversion EmoticonEmoticon