Durée : 5 minutes.

Vous aimeriez permettre à vos utilisateurs de télécharger des données récupérer depuis un serveur ? Leur permettre de télécharger une liste des mails de leurs amis, au format JSON ? (Pour pouvoir l’utiliser avec une API, par exemple) Tout ceci est très simple à faire avec Angular, et nous allons voir comment !

Un peu de théorie

Ce que nous voulons, c’est permettre aux utilisateurs de notre application de télécharger des données au format JSON, après avoir cliqué sur un bouton. Pour cela, nous allons avoir besoin des éléments suivants :

1. Le DomSanitizer : Il s’agit d’un service mis à disposition par Angular qui permet de désactiver temporairement certaines règles de vérifications interne à Angular. Nous injecterons ce service grâce à un constructeur.

2. La méthode bypassSecurityTrustUrl : Il s’agit d’une méthode du service DomSanitizer. Cette méthode permet d’ignorer certaines règles de sécurité pour une URL donné, afin qu’elle puisse être utilisé dans des hyperliens, en l’occurence notre bouton de téléchargement.

3. La fonction encodeURIComponent : cette fonction native Javascript permet d’encoder une URL en échappant tous les caractères sauf les lettres de l’alphabet latin, les chiffres (arabes) et certains symboles spéciaux.

Le code

On a besoin d’une méthode de notre composant qui génère l’URL de téléchargement, et aussi d’un bouton dans le template de notre composant pour permettre à l’utilisateur de télécharger les données.

Ci-dessous le code nécessaire, avec des commentaires pour tout comprendre :

<!-- Le bouton du template de votre composant. -->
<!-- [href] est une liaison d'attribut. -->
<!-- "download" est un attribut HTML5 qui permet de forcer le téléchargement,
et de renommer le fichier qui sera téléchargé par l'utilisateur ! -->
<button title="Download JSON" [href]="downloadJsonHref" download="download.json"></button>
// On utilise le constructeur du composant pour injecter le "DomSanitizer"
import {DomSanitizer, SafeResourceUrl, SafeUrl} from '@angular/plateform-browser';
// ...
constructor(private sanitizer: DomSanitizer) {}

// La méthode chargé de générer l'url de publication
generateDownloadJsonUrl() {
// On obtiens une chaîne JSON à partir des données que l'on veut transmettre
var JSONChain = JSON.stringify(this.someJSONResponse);
// On génère l'url de téléchargement
var url = this.sanitizer.bypassSecurityTrustUrl("data:text/json;charset=UTF-8," + encodeUriComponent(JSONChain));
// On attribue l'url générée à la propriété du composant
this.downloadJsonHref = url;
}

Et voilà, c’est dans la poche !

tumblr_o877f6kRj11si4b1do1_400

Conclusion

Vous pouvez maintenant permettre à vos utilisateurs de télécharger des données au format JSON : statistique utilisateur, liste de mails …  les usages sont multiples mais la mise en place est plutôt simple !

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

w

Connexion à %s