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

6 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.

  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!

Deja una respuesta

Tu dirección de correo electrónico no será publicada.