Comment télécharger des fichiers dans Angular2 ?

Téléchargement de fichiers dans Angular2

Vous rencontrez des difficultés lors de la mise en œuvre des téléchargements de fichiers à l'aide d'Angular2. Plus précisément, vous ne parvenez pas à comprendre comment enregistrer les données reçues et déclencher la fonctionnalité d'enregistrement de fichier. Explorons comment cela peut être réalisé dans Angular.

Le problème

Le principal problème dans votre code est que l'observable utilisé pour télécharger le fichier s'exécute dans un contexte distinct . Cela conduit à un objet vide lors de la tentative de création de la variable URL à l'aide de window.URL.createObjectURL. Pour résoudre ce problème, nous devons nous assurer que l'objectURL est construite dans le contexte correct.

La solution

Une solution efficace à ce problème consiste à s'abonner au observable et transmet les données à une fonction distincte qui gère le téléchargement du fichier. Cela peut être accompli avec le code suivant :

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

La fonction downloadFile est définie comme suit :

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

Dans cette fonction, nous créons un objet blob avec les données de réponse et spécifions le type de fichier. Ensuite, nous générons l'URL de l'objet et ouvrons une nouvelle fenêtre pour télécharger le fichier.

Considérations supplémentaires

Il est important de s'assurer que le module 'rxjs/Rx' est importé correctement. Afin d'utiliser des fonctionnalités observables telles que « s'abonner », vous devrez peut-être inclure la ligne suivante en haut de votre composant :

import 'rxjs/Rx';

Conclusion

Par en vous abonnant à l'observable et en transmettant les données à une fonction dédiée qui crée l'objectURL, vous pouvez télécharger avec succès des fichiers dans Angular2 et supérieur. Cette méthode vous permet d'avoir un meilleur contrôle sur le processus de téléchargement et de gérer les données dans le bon contexte.

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!