No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Descarga de archivos con Http

21/23
Recursos

Una necesidad muy común desde un front-end es la descarga de archivos provenientes de un servidor. Veamos cómo puedes manipular este tipo de información y lograr que el usuario pueda descargar un archivo.

Manipulando datos binarios

Los datos se transladan en forma binaria a través del canal de comunicación HTTP. Vamos a recibir dichos datos binarios y a manipularlos para crear el archivo.

1. Servicio para el manejo de archivos

Comienza creando un servicio para realizar peticiones y manipular archivos.

// services/files.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class FilesService {

  constructor() { }

  getFile(urlFile: string): Promise<any> {
    return fetch(urlFile, {
      method: 'GET',
    });
  }
}

En el método getFile() hace un fetch a una URL para obtener el Buffer del archivo.

Un Buffer es un espacio en la memoria que almacena datos binarios. En NodeJS, es posible acceder a estos espacios de memoria con la clase Buffer. Los búferes almacenan una secuencia de enteros, de forma similar a una matriz en Javascript. Del lado del front-end, es posible recibir un búfer de datos y manipularlo para convertirlo en un PDF, un XLS, entre otros.

2. Convertir datos binario en un archivo

Al realizar la solicitud y recibir el Buffer, lo convertimos en Blob para posteriormente creamos una URL temporal con URL.createObjectURL() pasándole dicho Blob y abriendo una nueva pestaña utilizando window.open() en el navegador.

openFile(): void {
  this.filesService.getFile('../../../assets/dummy.pdf')
    .then(response => response.blob())
    .then(pdf => {
      window.open(URL.createObjectURL(pdf), '_blank');
    })
    .catch(err => {
      console.log(err);
    });
}

La manipulación de archivos es esencial, cada navegador interpreta los tipos de datos de una manera distinta. Es común encontrarse con comportamientos distintos en cada navegador como por ejemplo, Chrome suele descargar directamente el archivo, mientras que Firefox lo abre en una nueva pestaña. Dependiendo tu necesidad, asegúrate de probar tu aplicación en varios navegadores diferentes.


Contribución creada por: Kevin Fiorentino.

Aportes 6

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

URL del PDF usado en clase

https://young-sands-07814.herokuapp.com/api/files/dummy.pdf

Para los curiosos, aquí el anterior (14 hojas)

https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf

Para quienes (como yo) no lo sabían, blob es un objeto tipo fichero de datos planos inmutables. Los Blobs representan datos que no necesariamente se encuentran en un formato nativo de JavaScript. La interfaz File se encuentra basada en un Blob, heredando y expendiendo la funcionalidad de un Blob para soportar archivos en el sistema del usuario.

librería

npm i file-saver

tipado

npm install @types/file-saver --save-dev

Bueno algo interesante cuando intente descargalor normalmente me paso que pum!! eror de CORS pero dije no yo se resolver esto entonces ni lento ni peresoso…

Funcion:

downloadPdf(){
    this.filesService.getfile('my.pdf', '/pdf.js/web/compressed.tracemonkey-pldi-09.pdf', 'application/pdf')
      .subscribe()
}

Proxy:

{
  "/api/*": {
    "target": "https://young-sands-07814.herokuapp.com",
    "secure": true,
    "logLevel": "debug",
    "changeOrigin": true
  },
  "/pdf.js/web/*": {
    "target": "https://mozilla.github.io",
    "secure": true,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

y listo…

Siempre tengo problemas descargando archivos desde un S3 porque Chrome te lo descarga directamente y Firefox te lo abre en una nueva ventana. Lo que suelo hacer es capturar el Buffer del PDF, convertirlo en Blob y con el objeto window abrirlo en una nueva pestaña, en el caso de no querer descargarlo.
Nunca pude hacerlo con el HttpClient de Angular, Gracias Nicolas!

  getPDF(): Promise<any> {
    return fetch(`url/to/pdf`), 
      {
        method: 'GET',
      });
  }
  openPDF(): void {
    this.getPDF()
      .then(response => response.blob())
      .then(pdf => {
        if (pdf) {
          window.open(URL.createObjectURL(pdf), '_blank');
        }
      })
      .catch(err => { 
        console.log(err);
      });
  }