Saltar al contenido

Descargar Archivo en Angular

Bueno, con este post espero complementar el post anterior:

Lo hago con angular, por que cuando me toco revisarlo en el trabajo use angular para hacerlo. Pero, me parece que encontrarán algunas funciones que les pueden servir, dado que son javascript puro.

Basicamente, tenemos una aplicación creada usando el tipico:

ng new app-name

Le he instalado algunas librerias para poder tener algo más decente que un alert, otras que las podrán revisar en el código fuente que como siempre dejo disponible. La demás lógica la he realizado en el “app.component” que se crea por defecto. Revisemos que hemos creado en nuestro “app.component.html”.

Adicion de botón de descarga

Al html inicial que se genera con nuestro nuevo proyecto ded angular, estoy adicionandole un botón de carga.

app.component.ts

Primer metodo, descarga el excel
Segundo método, le da formato como archivo y lo guarda en la pc

Acá, tenemos dos métodos, uno que nos permitirá descargar el array de bytes consumiendo el servicio, y el otro que obtendrá esta información, y lo descargará a nuestra máquina. Recordemos que si queremos que nuestro navegador abra una ventana para elegir donde guardar el archivo, se debe configurar en el mismo browser, de no ser así, el navegador lo descargará automáticamente en una carpeta (de descargas probablemente).

Finalmente, veamos que tenemos en nuestro servicio.

Consumo del servicio

Como se puede ver, es necesario en el header, indicar que esperamos un tipo “blob”. Hagamos ahora una prueba.

Abrimos nuestra aplicación, podemos ver nuestro botón, lo presionamos

Recordemos que tenemos que tener el servicio corriendo en el mismo puerto en el que se está poniendo en el servicio.

Petición al servicio.

Sale la petición a nuestro servicio

La petición, llega al endpoint.

Llega nuestra petición al servicio

Podemos ver acá la respuesta que estamos recibiendo de nuestro servicio.

Se descarga el archivo.

Descarga final del archivo

Bueno, así finalizamos esta serie de post de generar un archivo excel y descargarlo desde una web en angular. Espero que les sirva, dejo el video con la explicación y el codigo fuente en github por si les interesa.

REPO: GITHUB

Saludos.

Publicado enAngular

11 comentarios

  1. FIORELA ANAIZ LAZO NOMBERTO FIORELA ANAIZ LAZO NOMBERTO

    Hola, que tal, Probé tal cual lo agregaste y me salió al consumir mi propio servicio, muchísimas gracias por instruirnos y te deseo muchos éxitos,

    • wgutierrez wgutierrez

      Hola Fiorela, que bueno que te ayudo.

  2. Hola! Gracias por el tutorial.

    Tengo una pregunta, cómo se debería manejar cuando el backend está creando el reporte, dónde la creación de ese reporte, tarda más de un minuto. La pregunta es, en el front podrá realizar otras peticiones, navegar a otras rutas etc, y de alguna forma avisar al usuario que el reporte ya ha terminado de descargarse. Todo sucederá en la misma petición http inicial que se lanzó al solicitar el archivo a descargar.

    • Hola amigo, para tu caso lo que yo recuerdo que he hecho, es retornar un mensaje en la peticion http en el rango de los 200. Sin embargo de modo asincrono realizo todas las tareas necesarias para realziar el reporte y cuando este acaba, se envia por correo al usuario. Espero que te sirva, saludos y cuidante ahora en tiempos de covis.

    • Hola, si el reporte es pesado, puedes manejar distintas alternativas. Una es que la reportería se vea de otro modo, no a demanda a través de una petición http que este a la espera. La otra sería lanzar la solicitud y que luego te llegue un correo de manera asincrona cuando el reporte se haya realizado con el adjunto.

  3. KYBC KYBC

    Eres una piola papi, neta, no te mueras nunca!!!!!!

    • Hhahah que bueno que te sirvio amigo, el covis casi me mata, pero no, aún estamos por acá. Un saludo!

  4. Juan Juan

    Una consulta,

    Para descargar un archivo Excel de 300,000 registros, es necesario esta herramienta?

    Exportar datos masivos en formato Excel.

    Espero me respondas, gracias de antemano.

    • Hola, si no deberías tener ningún problema para descargar un archivo con las características que me indicas.

  5. Gina Gina

    Tengo problemas cuando quiero descargar n archivos , solo sale 1 o algunos, nunca todos.

    • Puede ser un tema de permisos del browser, normalmente te pide permisos para decargar multiples archivos. Lo otro que te podria recomendar, es que si son múltiples archivos, devuelvas un archivo comprimido con todos sus archivos dentro.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *