¿Qué es un archivo csv?

Un csv es un archivo de valores separados por comas. Se pueden usar con excel o con cualquier otro programa de hoja de cálculo. Se diferencian de otros tipos de archivo de hoja de cálculo en que no puede guardar ningún formato ni puede guardar las fórmulas.

Los archivos con extension csv tienen un comportamiento similar al que tienen los archivos png, jpg, pdf, el navegador los toma como archivos pequeños que puede mostrar en otra pestaña y no los descarga.

¿Cuál es el problema?

Los clientes cuando tratan de descargar un archivo en formato csv el navegador lo abre en una ventana nueva y no lo descarga.

Bien, un issue sencillo, nada complicado, ¿qué tan difícil es descargar un archivo csv?, y si, no es difícil descargar un csv, sin embargo, tuve que hacer una pequeña investigación antes de resolver este issue, y la quiero compartir con ustedes.

En vista de que el navegador no va a descargar el archivo, pero si muestra su contenido, lo primero hay que hacer es descargar el contenido del archivo que en nuestro caso es esta en AWS. Creamos una función que descargue el contenido usando fetch, a continuación con ayuda de la librería Downloadjs descargamos el archivo.

Downloadjs es una librería que permite descargar archivos en diferentes tipos de formatos. Recibe tres parámetros :

• El archivo que se va a descargar.
• El nombre del archivo y su extensión(archivo.csv)
• El MIME type (Es una forma estandarizada de indicar la naturaleza y el formato de un documento) MDN

Este es el método rápido, sencillo y mágico para descargar un archivo csv.

Y así de fácil tienes tu archivo csv.

También puedes descargar un cvs de otra forma un poco mas compleja pero igual de efectiva.

De igual manera que antes descargamos el contenido del archivo con fetch,con new blobconcatenamos la información, le decimos el tipo de archivo que será, creamos una nueva url de la cual vamos a descargar el archivo csv. Creamos una etiqueta (<a></a>)y descargamos el archivo. Posteriormente eliminamos la url creada ya que el navegador no debe guardar la referencia al archivo.

Aqui puedes probar que funciona.

Para finalizar

Si usas el primer método te vas ahorrar código y también vas a poder descargar archivos jpg, png, pdf, txt, gif. De igual manera que con los .csv los puedes descargar muy fácil y rápido. Ten en cuanta que estas agregando una librería mas a tu código con lo que ello implica, aunque al final es una librería pequeña que hace algo puntual.

Si usas el segundo método es un poco mas de código, pero te estas evitando una librería mas en el código. Ahora si sabes que lo único que necesitas es descargar archivos .csv y no necesitas los otros formatos que mencioné anteriormente, pues para que agregar una librería con este método es suficiente.

¿Cuál es la mejor?

Depende de como estén trabajando, del equipo y de que librerías y/o frameworks estén utilizando.

Correcciones, mejoras, comentarios, siempre bien recibidos.

Saludos.