Comment convertir des données JSON en une feuille de calcul Excel avec Angular

En tant que développeur, vous êtes prêt à relever quotidiennement de nouveaux défis dans les différents projets sur lesquels vous travaillez. Les applications Web doivent parfois effectuer des tâches supplémentaires pour atteindre différents objectifs en fonction des exigences commerciales ou techniques.

Vous devrez peut-être collecter des données à partir d'une API et les traiter dans un format différent tel que PDF, XML, DOCX ou XLSX.

Dans ce guide, vous apprendrez à transformer les données JSON reçues d'une réponse API en une feuille de calcul Excel bien organisée dans votre application Angular.

Qu'est-ce que la bibliothèque XLSX?

La bibliothèque Xlsx est une ressource efficace pour les développeurs Angular qui souhaitent transformer les données JSON d'une réponse API en une feuille de calcul Excel soignée. Grâce à l'utilisation de ce module, les développeurs peuvent rapidement télécharger et modifier les données JSON.

Vous pouvez utiliser la bibliothèque Xlsx pour créer des rapports pour votre équipe ou pour présenter les données de nouvelles façons. Si vous voulez un moyen rapide et facile de gérer vos données dans les applications JavaScript, c'est une bonne option.

Comment configurer la bibliothèque XLSX avec une application angulaire

Avant de commencer avec la bibliothèque Xlsx dans votre application Angular, il est important d'avoir un environnement de développement Node.js et Angular configuré sur votre machine. Avec Node.js installé, Angular est facile à configurer en exécutant npm install -g @angular/cli dans une borne.

Créez un nouveau projet angulaire en exécutant ng new [votre-angular-app-name] dans l'aérogare. Naviguez ensuite dans le répertoire du projet comme indiqué ci-dessous :

Vous pouvez également démarrer un serveur de développement local en exécutant ng servir --o, qui vous permet de visualiser votre application Angular et les modifications qui y sont apportées en direct dans le navigateur.

Après avoir configuré une application angulaire, l'installation de la bibliothèque Xlsx est un processus simple que vous pouvez terminer simplement en exécutant npm install xlsx --save. Cette commande installera les dépendances nécessaires pour utiliser la bibliothèque Xlsx.

Comment convertir des données JSON au format XLSX dans Angular

Avec la CLI angulaire, vous pouvez générer un nouveau service en exécutant le ng génère le service [nom du service] commande dans le terminal. Par exemple, dans ce cas, vous pouvez générer le service Excel dont vous avez besoin en utilisant ng génère le service ExcelService.

Ce générer commande créera le fichier de service: ExcelService.service.ts, dans le source/application répertoire du projet. Le fichier ressemble à ceci par défaut :

importer { Injectables } depuis'@angular/noyau'; 
@Injectable({ Fourni dans: 'racine' }) 
exporterclasseExcelServiceService{
constructeur() { } 
}

Ce ExcelService Le fichier gérera la fonctionnalité d'exportation des données au format Excel. Mettre à jour le ExcelService.service.ts fichier pour ressembler au code ci-dessous :

importer { Injectables } depuis'@angular/noyau'; 
importer * comme XLSX depuis'xlsx'; 
constante EXCEL_EXTENSION = '.xlsx'; // extension de fichier excel
@Injectable({ Fourni dans: 'racine' }) 
exporterclasseExcelServiceService{ 
constructeur () { }
publicexporter vers Excel(élément: n'importe lequel, fileName: chaîne): annuler{
// génère le classeur et ajoute la feuille de calcul
constante ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (élément) ;
constante classeur: XLSX.WorkBook = XLSX.utils.book_new(); 
// enregistrer dans un fichier
 XLSX.utils.book_append_sheet (classeur, ws, 'Feuille1');
 XLSX.writeFile (classeur, ${fileName}${EXCEL_EXTENSION}); 
 }
}

Dans le code ci-dessus, vous importez le Xlsx bibliothèque et créer une variable constante, EXCEL_EXTENSION pour stocker l'extension de fichier Excel.

Le exporter vers Excel La méthode accepte deux paramètres: élément et nom de fichier. Le paramètre élément représente les données à exporter vers le fichier Excel, tandis que le nom de fichier paramètre est le nom du fichier Excel.

Pour exporter les données vers le fichier Excel, créez une feuille de calcul à l'aide du json_to_sheet méthode de la bibliothèque Xlsx. Créez également un classeur en utilisant les livre_nouveau méthode.

Ensuite, ajoutez la feuille de calcul au classeur avec le book_append_sheet et enregistrez-le dans un fichier à l'aide de écrireFichier.

Auparavant, vous avez créé un service Excel pour faciliter le processus de téléchargement et de conversion des données JSON en une feuille Excel. Pour utiliser ce service, vous devez créer le composant angulaire approprié et importez-y le fichier de service.

importer { ExcelService } depuis'./service.excel';

Ensuite, vous devez l'injecter dans le constructeur du composant comme ceci :

constructeur(ExcelService privé: ExcelService) { 
... 
}

Ensuite, vous pouvez continuer à implémenter la fonction (exporterExcel) où vous utiliserez le exporter vers Excel méthode pour exporter JSON vers Excel. Le code ci-dessous montre comment procéder.

exportExcel(): annuler { 
constante fichierÀExporter = ce.apiJsonResponseData.map((articles: n'importe lequel) => { 
retour {
"ID de l'utilisateur": articles?.userId,
"Identifiant": articles?.id,
"Titre": articles?.titre,
"Corps": articles?.corps
 } 
 });
ce.excelService.exportToExcel(
 fichieràexporter,
'votreFichierExcel-' + nouveauDate().getTime() + '.xlsx'
 );
}

Dans le code ci-dessus, vous avez défini le exporterExcel méthode pour appeler le exporter vers Excel méthode de la ExcelService. La nouvelle variable, fichieràexporter, stocke les données à exporter. Le apiJsonResponseData array contient les données JSON obtenues à partir de la réponse de l'API.

Par la suite, le exporter vers Excel méthode de la excelService prend le fichierÀExporter et votre préféré nom de fichier. Remarquez comment vous pouvez ajouter l'horodatage actuel au nom de fichier pour vous assurer qu'il est unique. Cette méthode convertira les données JSON et les exportera dans un fichier XLSX que vous pourrez ensuite prévisualiser dans Excel.

Cette fonction est maintenant disponible pour être utilisée dans n'importe quelle partie de votre application Angular, et vous pouvez facilement l'ajouter en tant que gestionnaire d'événements pour un Cliquez sur événement ou l'utiliser de toute autre manière appropriée en fonction de vos besoins.

Vous pouvez voir un exemple d'utilisation de cette fonctionnalité dans l'image ci-dessous. Les données JSON d'une API externe s'affichent sur la page, avec un bouton pour Exporter des données vers Excel:

Lorsque vous cliquez sur le Exporter des données vers Excel bouton, votre navigateur téléchargera le fichier Excel. Lorsque vous ouvrir le fichier XLSX, le fichier de feuille de calcul en sortie ressemble à ceci :

La bibliothèque Xlsx peut faire bien plus que convertir JSON au format Excel. Il offre une bibliothèque robuste et prend en charge divers formats de fichiers que vous pourriez rencontrer en entreprise. Vérifiez Documentation de la bibliothèque Xlsx sur npm pour en savoir plus à ce sujet.

Conversion de données de JSON en feuilles de calcul Excel dans Angular

Vous pouvez utiliser la bibliothèque Xlsx pour manipuler facilement des feuilles de calcul Excel dans votre application Web. Les étapes que vous avez effectuées ici vous permettent de transformer les données JSON d'une API en une feuille de calcul Excel bien organisée. Vous pouvez également reconvertir les données Excel en JSON à l'aide d'autres fonctions de la bibliothèque.

Un bon moyen de s'entraîner à utiliser cette bibliothèque consiste à créer une application qui génère des rapports hebdomadaires ou mensuels à partir d'une API et les organise sous forme de données Excel.