Envoyer, traiter et recevoir un Excel dans votre SI

Envoyer, traiter et recevoir un Excel dans votre SI

Les fichiers Excel, ça existe toujours. Ils sont pratiques et rapides. Cependant, pour les inscrire dans le cadre d’un système d’information (SI), avec des bases de données et divers micro-services, cela peut s’avérer être une toute autre histoire pas forcément marrante.

On va donc voire ici comment proposer une interface pour charger un fichier Excel (.xlsx) vers un micro-service qui va le modifier, compléter et/ou enrichir, pour ensuite le renvoyer vers le client.

Pour commencer, il va nous falloir quelques outils. Nous prendrons ici une application web réalisée avec vue.js et un micro-service web avec Python et Flask.

Différents points techniques seront abordés :

  • Émission et réception d’un signal vue.js,
  • Envoie d’un blob avec axios,
  • Appeler une fonction d’un composant enfant depuis son parent en vue.js avec $refs,
  • Autoriser un header CORS spécifique,
  • Proposer un téléchargement au navigateur,
  • Passer une fonction en props. avec vue.js.

Envoyer un fichier XLSX vers le back-end

Nous allons générer ce type d’interface :

Pour fonctionner, le composant nécessite deux methods, quelques attributs (data), un import (file-saver), ainsi qu’une machine à état (INITIAL, SELECTED, PROCESSING, SUCCESS, FAILED).

Pour commencer, créer un nouveau fichier pour mettre en place le composant vue.js appelé DropDownload.vue.

Ensuite, le composant va devoir accepter une fonction passée en props permettant d’envoyer le fichier vers le bon micro-service. Ici, le choix est fait de faire un composant générique et réutilisable. Pour cette raison, nous ne pouvons pas insérer au sein du composant la fonction ou URL appelé directement. Le composant parent sera, ainsi, chargé d’instancier le composant DropDownload avec les bons paramètres.

Il va nous falloir deux methods, handleFileUpload pour la sélection du fichier, et submitFile pour l’envoie et le téléchargement du xlsx.

La method handleFileUpload doit récupérer le fichier depuis le DOM pour le stocker dans un attribut ‘vue’, changer l’état du composant pour passer de INITIAL à SELECTED, puis, émettre un signal fileSelected pour déclencher d’éventuels comportements sur des composants.

Complétons ensuite la partie HTML pour répondre à nos besoins. Nous aurons besoin d’un input identifié par l’attribut REF, et qui appelle la méthod handleFileUpload lors de changements.

 Ajoutons ensuite la machine à état et son affichage.


Et pour finir, la fonction submitFile, appelée par le composant parent. Cette fonction prépare les données, les transmet à la fonction passé en prop, puis change l’état. Note importante, pour envoyer les données au format binaire au backend, il faut préciser le type d’envoi.

Voici le résultat avec axios : Le traitement de la réponse pour réaliser son enregistrement sera traité plus tard. Un peu de CSS permet de rendre le composant plus agréable.

Réception du fichier

Nous travaillons ici avec un micro-service web utilisant Flask et Flask-RestX.

On déclare la class avec la route d’accès de l’API.

Par la suite, on récupère le fichier binaire passé en POST et le stocke dans une variable.

Ici, la nomenclature. Il nous reste à faire le traitement et retour du fichier.

Traitement & renvoie vers le client

Ici, les étapes d’ouverture, modification en mémoire et retour du fichier vers le client seront traitées. On commence par créer le flux de sortie :

Vous pouvez ouvrir et lire votre Excel avec Panda par exemple.

Après avoir écrit votre Excel de sortie, on ferme le fichier puis on remet le curseur du flux au début. Enfin, on retourne le fichier.

Attention, pour pouvoir récupérer le nom de fichier depuis le client web, il est nécessaire d’autoriser le headerContent-Disposition des CORS. Dans notre fichier extensions.py, Flask est chargé de créer les modules et de rajouter l’autorisation des CORS.

Réception par le client

Sur le composant vue, dans submitFile, on récupère et sauvegarde le fichier sur l’ordinateur à l’aide de la fonction saveAs de file-saver.

Enfin, voici comment inclure le composant et ajouter un bouton pour appeler la fonction submitFile.

Vous pouvez tester ! Vous voilà avec un DropDownload opérationnel et réutilisable !