Comment implémenter des téléchargements de fichiers sans effort dans votre application Angular2 ?

Téléchargements de fichiers Angular2 facilités

Lors du développement d'un client Angular2 pour une application WebApi ou MVC, comprendre l'enregistrement de fichiers peut être intimidant. Cette procédure pas à pas vous guidera tout au long du processus de déclenchement des sauvegardes de fichiers dans Angular2 et au-delà.

Dans Angular2, la nature observable du traitement des requêtes introduit une subtile tournure. Pour réussir à télécharger un fichier, vous devrez créer l'objet URL du fichier dans la fonction de rappel de l'observable. Cela garantit que les données du fichier sont disponibles lors de la création de l'URL.

Par exemple, l'extrait de code suivant montre comment gérer les téléchargements de fichiers :

this._reportService.getReport().subscribe(data => this.downloadFile(data)),//console.log(data),
                 error => console.log('Error downloading the file.'),
                 () => console.info('OK');

Ici, notre _reportService.getReport( ) l'appel renvoie un observable. Lorsque la requête est terminée, la fonction downloadFile est invoquée avec les données du fichier.

Dans downloadFile, nous créons un objet Blob à partir des données reçues et spécifions son type MIME :

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

Avec l'objet Blob créé, nous pouvons utiliser createObjectURL pour générer l'URL téléchargeable. Enfin, window.open(url) déclenche la sauvegarde du fichier.

En conclusion, en gérant les téléchargements de fichiers au sein de la fonction de rappel de l'observable, vous pouvez garantir l'accès aux données téléchargées au bon moment. Cela vous permet de fournir sans effort une fonctionnalité de téléchargement de fichiers transparente dans vos applications Angular2.

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!