¿Te ha tocado esa tarea clásica en el trabajo de exportar datos a un archivo CSV directamente desde el navegador? Con JavaScript puro y el método map puedes construir un reporte descargable en pocas líneas, sin backend ni librerías externas. Aquí verás cómo transformar una lista de hábitos en un archivo CSV listo para abrir en Excel o Google Drive.
¿Cómo preparar el botón de exportar en el HTML?
Antes de escribir la lógica, necesitas un punto de entrada visual. La idea es agregar un botón junto a los controles que ya tenías, por ejemplo al lado de Registrar.
En el HTML se agrega un botón con el texto Exportar y un identificador claro como exportHabits. Ese id será el que uses después para engancharle el listener desde JavaScript [1:00].
¿Dónde debo colocar el botón de exportar? Junto a los botones existentes de tu interfaz, con un id único que puedas seleccionar desde JavaScript. Lo demás lo maneja el listener.
Una vez recargues con Hard Reload (clic secundario sobre el botón de refresh del navegador), el botón aparece disponible para engancharle la lógica.
¿Cómo transformar los datos con map antes de exportar?
Aquí es donde el método map brilla como herramienta de pipeline. La idea es tomar la lista original de hábitos, que viene como instancias de una clase, y convertirla en objetos planos con solo los campos que quieres exportar.
Desde setupModelListeners se agrega un listener al botón que dispara la función exportToCSV. Dentro de esa función, el primer paso es acceder a la lista de hábitos y aplicar map [3:30].
La primera transformación crea un objeto nuevo por cada hábito con tres atributos:
- El nombre del hábito.
- La frecuencia con la que se realiza.
- La cantidad de registros, calculada con el método
getLogs().length.
Ese getLogs es un método que ya vive dentro de la clase gracias a la programación orientada a objetos, y devuelve cuántas veces se ha marcado el hábito. Con esto pasas de una clase compleja a un objeto plano fácil de serializar.
¿Puedo encadenar varios map en el mismo pipeline?
Sí, y muchas veces conviene por legibilidad. En el ejercicio se encadena un segundo map que toma cada objeto plano y lo convierte en una fila de texto separada por comas, que es el formato natural de un CSV.
Puedes tener dos, cuatro o cinco maps unidos sin problema. Puede haber un costo en rendimiento si trabajas con listas gigantes, pero si tu código gana claridad, vale la pena. Ese es el espíritu de un pipeline de datos: pequeñas transformaciones encadenadas.
¿Cómo generar el archivo CSV descargable con Blob?
Con los datos ya transformados en filas, falta unirlas y empaquetarlas como archivo. Aquí entran tres piezas: join, Blob y una etiqueta ancla temporal en el DOM [7:40].
Primero aplicas un join('\n') sobre el array de filas para que cada hábito quede en una línea nueva. Ese join también forma parte del pipeline y es un método disponible tanto en arrays como en strings.
¿Qué es un Blob en JavaScript? Es un objeto que representa datos binarios o de texto listos para tratarse como archivo dentro del navegador. Sirve para CSV, TXT e incluso PDF.
El Blob se crea pasándole el contenido y el tipo de archivo, en este caso text/csv. Aquí hay un detalle clave que rompe el código si lo ignoras: el primer argumento del constructor Blob debe ser un array, no un string suelto. Si le mandas el string directo, el navegador lanza un error de forma incorrecta [10:15].
¿Cómo forzar la descarga automática del archivo?
Una vez tienes el Blob, generas una URL temporal con URL.createObjectURL. Luego creas dinámicamente una etiqueta <a>, le asignas esa URL en el atributo href, le pones un nombre de archivo como habits.csv en el atributo download y disparas un click programático.
Ese clic simulado le dice al navegador que descargue el archivo como si el usuario hubiera hecho clic en un enlace real. Es un truco elegante que evita depender de backends o librerías pesadas.
¿Qué obtienes al final y cómo mejorar el reporte?
Al abrir el archivo descargado en Google Drive, Excel o incluso en Visual Studio Code, verás tres columnas: nombre del hábito, frecuencia y número de veces registrado. Es un archivo de texto plano, pero cualquier visualizador de CSV lo interpreta como tabla.
Lo interesante es notar que el mismo método map que usas para renderizar en pantalla es el que aquí genera el reporte. Cambia el destino, no la herramienta. Esa es la potencia de pensar en transformaciones de datos en lugar de bucles manuales.
Como reto, agrega una fila de headers al inicio del CSV con los nombres de las columnas. Es una mejora simple que profesionaliza el reporte y lo deja listo para compartir. ¿Cómo lo resolverías tú? Cuéntame en los comentarios qué otras columnas agregarías.
