Comment télécharger des fichiers dans Angular2 à l'aide d'observables et de blobs ?

Comment Angular2 gère le téléchargement de fichiers

Dans Angular2 et versions ultérieures, le téléchargement d'un fichier implique l'utilisation d'observables et de blobs pour récupérer et enregistrer les données. Explorons un scénario spécifique dans lequel une application Angular télécharge un fichier.

Comprendre le problème

Un utilisateur rencontre un problème lors de la mise en œuvre de la fonctionnalité de téléchargement de fichiers dans un client Angular2 pour un Application WebApi/MVC. Ils ont correctement configuré la requête, mais ont du mal à comprendre comment Angular gère l'enregistrement des fichiers.

La solution

Le problème se pose car l'observable qui gère le téléchargement des fichiers s'exécute dans un contexte à part. Cela conduit à ce qu'un objet vide soit transmis à la variable URL au lieu du blob souhaité.

Pour résoudre ce problème, la solution consiste à s'abonner à l'Observable de manière à transmettre les données en réponse directement à une fonction désignée. , tels que :

this._reportService.getReport().subscribe(data => this.downloadFile(data));

Dans la fonction downloadFile, le blob est créé à l'aide des données de réponse :

downloadFile(data: Response) {
  const blob = new Blob([data], { type: 'text/csv' });
  const url = window.URL.createObjectURL(blob);
  window.open(url);
}

En gérant séparément l'abonnement et la création du blob, le contexte correct est établi , en vous assurant que la variable URL contient le blob souhaité.

Considérations supplémentaires

Pour garantir une ouverture réussie du fichier, il est important de vérifier que 'rxjs/Rx' a été importé :

import 'rxjs/Rx';

Cette solution résout le problème en gérant correctement le contexte dans lequel la création d'observables et de blob se produit. Il permet aux applications Angular2 de télécharger des fichiers efficacement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!