Importer et exporter Excel XLSX à l'aide de Vue : un guide

"Cela a l'air génial, mais pourriez-vous simplement ajouter l'importation Excel ?"

Si vous développez des logiciels depuis longtemps, vous avez probablement entendu cette question de la part d'un responsable plus d'une fois. Pour un public non technique, demander une importation/exportation Excel ne semble pas être un gros problème. À quel point cela pourrait-il être difficile, n'est-ce pas ?

Mais trop souvent, cette question fait peur aux développeurs. Sur la plupart des plateformes, travailler avec des fichiers Excel demande beaucoup de travail. Historiquement, cela a été doublement vrai sur le Web. Travailler avec des données Excel dans une application Web ressemble un peu à cette bande dessinée xkcd : "Il peut être difficile d'expliquer la différence entre ce qui est facile et ce qui est pratiquement impossible." Créer votre propre feuille de calcul dans le navigateur avec l'importation et l'exportation Excel semble être un problème qui prendra cinq ans et une équipe de recherche à résoudre.

Cela change. Nous disposons désormais de bibliothèques clé en main qui vous permettent de déposer une feuille de calcul entièrement fonctionnelle dans votre application Web. SpreadJS en fait partie. Nous verrons comment prendre une application Vue existante – une application du monde réel utilisant un magasin Vuex – et l'améliorer à l'aide de SpreadJS.

Le reste de l'article suppose que vous comprenez déjà HTML, CSS et JavaScript. Cela suppose également que vous possédez une connaissance pratique du framework JavaScript progressif Vue.js pour la création d'une interface utilisateur Web. Cela vous aidera si vous avez utilisé Vuex pour la gestion de l'état, mais ne vous inquiétez pas si ce n'est pas le cas. C'est intuitif et facile à comprendre, et vous pourrez comprendre ce qui se passe simplement en lisant le code si vous avez utilisé Vue.

Dans ce blog, nous expliquerons comment ajouter l'importation et l'exportation Excel à votre application Vue en suivant ces étapes :

1. Structure des applications Vue
2. Ajoutez SpreadJS à votre application Vue
3. Ajouter une exportation Excel
4. Ajouter une importation Excel
5. Testez votre application Vue

L'application Vue

L'application Vue sur laquelle nous allons travailler est un tableau de bord de vente simple avec quelques panneaux récapitulatifs et un tableau de données. C'est le genre d'application qui entre dans la catégorie « pas mal » :

Bien qu'il ne s'agisse que d'une démo, c'est exactement le genre d'application que les développeurs Web d'entreprise doivent créer. C'est aussi exactement le genre d'application à laquelle on nous demande généralement d'ajouter des fonctionnalités Excel, ce sera donc un exemple parfait pour le reste de cet article.

Le code de cette application peut être trouvé ici .

Si vous souhaitez voir comment créer une application Vue à partir de zéro, consultez ce guide de démarrage rapide .

Pour préparer le terrain, le tableau de bord est une application d'une seule page réalisée avec Vue. Il utilise les dernières et meilleures pratiques de Vue : des composants à fichier unique et un magasin de données Vuex. Il utilise également Bootstrap pour ses composants CSS et son système de grille.

Bootstrap n'est plus aussi populaire qu'avant, mais en réalité, Bootstrap est toujours partout, en particulier dans les applications Web d'entreprise où la prise en charge d'Excel est généralement nécessaire. Nous parions que de nombreuses nouvelles applications Web d’entreprise utiliseront encore Bootstrap en 2030.

Si vous préférez utiliser Bulma ou Tachyons dans vos applications compatibles avec les feuilles de calcul, allez-y ! SpreadJS fonctionnera bien avec l’un ou l’autre.

Structure des applications Vue

Jetons un coup d'œil à la façon dont le code est structuré. Notre magasin Vuex et notre application Vue sont tous deux définis dans main.js . Nous avons plusieurs composants Vue à fichier unique, tous situés dans le dossier des composants.

Si vous regardez notre boutique Vuex, vous verrez ce qui suit :

 const store = new Vuex.Store({ state: { recentSales } mutations: { UPDATE_RECENT_SALES(state) { state.recentSales.push([]); state.recentSales.pop(); } } });

L'état initial de notre boutique est défini sur la valeur de recentSales, un ensemble de données factices que nous avons importées. Nous avons également une fonction qui gère la mise à jour des ventes récentes lorsqu'elles sont modifiées.

Attends une minute. Si nous ne disposons que d’un seul ensemble de données, comment générer trois graphiques et un tableau ? Pour voir ce qui se passe, ouvrez le composant Dashboard.vue . Dans celui-ci, vous verrez plusieurs propriétés calculées générées en fonction des données du magasin Vuex :

 <template> <div style="background-color: #ddd"> <NavBar title="Awesome Dashboard"/> <div class="container"> <div class="row"> <TotalSales :total="totalSales"/> <SalesByCountry :salesData="countrySales"/> <SalesByPerson :salesData="personSales"/> <SalesTable :tableData="salesTableData"/> </div> </div> </div> </template> <script> import NavBar from "./NavBar"; import TotalSales from "./TotalSales"; import SalesByCountry from "./SalesByCountry"; import SalesByPerson from "./SalesByPerson"; import SalesTable from "./SalesTable"; import { groupBySum } from "../util/util"; export default { components: { NavBar, SalesByCountry, SalesByPerson, SalesTable, TotalSales }, computed: { totalSales() { const items = this.$store.state.recentSales; const total = items.reduce((acc, sale) => (acc += sale.value), 0); return parseInt(total); }, chartData() { const items = this.$store.state.recentSales; const groups = groupBySum(items, "country", "value"); return groups; }, personSales() { const items = this.$store.state.recentSales; const groups = groupBySum(items, "soldBy", "value"); return groups; }, salesTableData() { return this.$store.state.recentSales; }, } }; </script>

Maintenant, cela a plus de sens! L'ensemble de données unique contient tout ce dont nous avons besoin pour générer tous les chiffres et tableaux de notre tableau de bord. Étant donné que les données se trouvent dans un magasin Vuex réactif, si les données sont mises à jour, tous les panneaux du tableau de bord seront mis à jour automatiquement.

Cette réactivité nous sera utile dans la section suivante lorsque nous remplacerons notre vieux tableau statique ennuyeux par une feuille de calcul modifiable.

Ajout de SpreadJS à votre application Vue

C'est ici que le plaisir commence ! Nous avons notre tableau de bord, mais nous voulons éliminer ce vieux tableau HTML encombrant. Il va donc falloir changer un peu les choses. Nous avons un excellent point de départ, mais nous devons exécuter notre application localement pour utiliser SpreadJS en mode développement sans licence.

Vous pouvez télécharger le code terminé pour voir le résultat final.

Commencez par ouvrir le projet d'origine sans SpreadJS. Ouvrez un terminal, accédez au répertoire dans lequel vous avez cloné le référentiel et exécutez « npm install ». Cela installe les dépendances nécessaires à l'exécution de l'application. Une fois l'installation de la dépendance terminée, exécutez « npm serve » pour voir l'application mise à jour en action. Si vous souhaitez importer spécifiquement les bibliothèques utilisées, vous pouvez utiliser cette commande :

 npm install @mescius/spread-sheets @mescius/spread-sheets-vue @mescius/spread-excelio file-saver bootstrap

Passons en revue les modifications que nous devrons apporter pour mettre à niveau notre ancienne application vers sa nouvelle version améliorée. Puisque nous allons remplacer notre table des ventes par une feuille de calcul, nous allons placer la feuille dans notre composant SalesTable.vue existant, mais nous devrons d'abord nous débarrasser de notre ancienne table. Une fois parti, notre modèle SalesTable ressemblera à ceci :

 <template> <TablePanel title="Recent Sales"> </TablePanel> </template>

Après avoir éliminé le tableau, nous avons notre panneau de tableau prêt et attendons une feuille de calcul, alors ajoutons-en une ! Après avoir ajouté une feuille SpreadJS, notre modèle ressemblera à ceci :

 <template> <TablePanel title="Recent Sales"> <gc-spread-sheets :hostClass='hostClass' @workbookInitialized='workbookInit'> <gc-worksheet :dataSource='tableData' :autoGenerateColumns='autoGenerateColumns'> <gc-column :width='50' :dataField="'id'" :headerText="'ID'" :visible = 'visible' :resizable = 'resizable' > </gc-column> <gc-column :width='300' :dataField="'client'" :headerText="'Client'" :visible = 'visible' :resizable = 'resizable' > </gc-column> <gc-column :width="350" :headerText="'Description'" :dataField="'description'" :visible = 'visible' :resizable = 'resizable' > </gc-column> <gc-column :width="100" :dataField="'value'" :headerText="'Value'" :visible = 'visible' :formatter = 'priceFormatter' :resizable = 'resizable' > </gc-column> <gc-column :width="100" :dataField="'itemCount'" :headerText="'Quantity'" :visible = 'visible' :resizable = 'resizable' > </gc-column> <gc-column :width="100" :dataField="'soldBy'" :headerText="'Sold By'" :visible = 'visible' :resizable = 'resizable' ></gc-column> <gc-column :width="100" :dataField="'country'" :headerText="'Country'" :visible = 'visible' :resizable = 'resizable' ></gc-column> </gc-worksheet> </gc-spread-sheets> </TablePanel> </template>

Cela fait beaucoup de choses à comprendre, alors parcourons-le pour comprendre ce qui se passe.

Tout d'abord, nous créons une feuille de calcul en utilisant l'élément gc-spread-sheets et en la liant à deux des propriétés de notre composant : hostClass et workbookInit.

Dans la feuille de calcul, nous créons une nouvelle feuille de calcul avec l'élément gc-worksheet et la lions aux propriétés tableData et autoGenerateColumns de notre composant. Notez que tableData est exactement le même tableData que nous avons utilisé pour générer notre tableau HTML simple. Nous pouvons mettre nos données dans SpreadJS telles quelles, sans aucune modification requise !

Enfin, à l'intérieur de la feuille de calcul, nous définissons des colonnes qui indiquent à SpreadJS comment afficher nos données. La propriété dataField nous indique quelle propriété de l'ensemble de données sous-jacent cette colonne doit afficher, et headerText donne à SpreadJS un nom de colonne bien formaté à utiliser. Le reste des liaisons pour chaque colonne est simple. La documentation SpreadJS contient une liste complète de tout ce que vous pouvez transmettre à une colonne gc.

Alors, avec notre modèle en place, quelle quantité de code sera nécessaire pour que tout cela fonctionne ? Heureusement, pas grand chose du tout ! Voici le nouveau code de script de notre composant SalesTable.vue :

 import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css"; // SpreadJS imports import GC from "@mescius/spread-sheets"; import "@mescius/spread-sheets-vue"; import Excel from "@mescius/spread-excelio"; import TablePanel from "./TablePanel"; export default { components: { TablePanel }, props: ["tableData"], data(){ return { sheetName: 'Sales Data', hostClass:'spreadsheet', autoGenerateColumns:true, width:200, visible:true, resizable:true, priceFormatter:"$ #.00" } }, methods: { workbookInit: function(_spread_) { this._spread = spread; var self = this; spread.bind(GC.Spread.Sheets.Events.ValueChanged, function () { const store = self.$store; var sheet = self._spread.getSheetFromName("Sales Data"); var newSalesData = sheet.getDataSource(); store.commit('UPDATE_RECENT_SALES', newSalesData); }); } } };

En raison de la simplicité de Vue, très peu de code est nécessaire pour que cela fonctionne. S'il y a quelque chose ici que vous n'êtes pas familier, la section « Composants en profondeur » de la documentation Vue explique en détail les composants Vue. Les seules choses qui ont changé sont quelques importations, certaines propriétés de données et quelques méthodes. Les propriétés des données doivent vous sembler familières ; nous les avons vus il y a un instant dans le modèle. Ce sont des options de configuration que nous lions aux composants de notre feuille de calcul SpreadJS.

La méthode workbookInit est un rappel que SpreadJS appelle lorsque la feuille est initialisée. Dans cette méthode, nous enregistrons notre objet de feuille de calcul SheetJS en tant que variable d'instance sur notre composant afin de pouvoir interagir directement avec lui si nécessaire. Nous avons également ajouté une fonction de liaison pour l'événement ValueChanged afin de mettre à jour automatiquement les données chaque fois que les valeurs sont modifiées dans l'instance SpreadJS.

Un dernier changement : nous donnons à notre composant un style étendu pour aider le style de la feuille de calcul lui-même. Nous l'avons vu plus tôt lorsque nous avons transmis la classe hostClass à l'élément gc-spread-sheets. Puisque hostClass est défini sur « spreadsheet », nous allons créer une classe CSS nommée spreadsheet :

 <style scoped> .spreadsheet { width: 100%; height: 400px; border: 1px solid lightgray; } </style>

À ce stade, si nous n’apportons aucune autre modification et chargeons notre tableau de bord, il ressemblera à ceci :

Mais attendez, il y a plus !

Rappelez-vous comment nous avons transmis les données de notre tableau à la feuille de calcul sans apporter aucune modification à l'ensemble de données ? Maintenant que nos données sont dans une feuille de calcul, nous pouvons les modifier.

Que se passera-t-il si nous changeons la valeur de la vente n°6 de 35 000 $ à 3 500 $ ? Si nous allons dans la feuille et modifions la valeur, nous obtenons un tableau de bord qui ressemble à ceci :

Ouah! Ce qui s'est passé?

Nous avons mis à jour la feuille SpreadJS et elle a automatiquement mis à jour notre boutique Vuex.

Il semble également qu’Angela soit passée d’un mois de ventes spectaculaires à un mois médiocre. Désolé pour ça, Angela !

Nous disposons désormais d'un tableau de bord amélioré qui plaira à un responsable. Ils peuvent modifier les données et voir la mise à jour du tableau de bord sous leurs yeux, mais nous pouvons faire encore mieux en ajoutant la possibilité d'importer et d'exporter des fichiers Excel. Ensuite, nous apprendrons comment procéder.

Ajout de l'exportation Excel

Ajouter l’export Excel à notre feuille est simple. Tout d’abord, ajoutons un bouton d’exportation à notre tableau de bord. Nous allons le placer en bas de notre panneau de table dans le fichier SalesTable.vue , juste après la balise de fermeture gc-spread-sheets :

 … </gc-spread-sheets> <div class="dashboardRow"> <button class="btn btn-primary dashboardButton" @click="exportSheet"> Export to Excel </button> </div> </TablePanel> </template>

Comme vous pouvez le voir, notre bouton attend un gestionnaire de clics nommé exportSheet. Nous l'ajouterons dans un instant, mais d'abord, nous importerons une fonction d'un package NPM nommé file-saver :

 import { saveAs } from 'file-saver';

Ensuite, ajoutons exportSheet à l'objet méthodes de notre composant :

 exportSheet: function() { const spread = this._spread; const fileName = "SalesData.xlsx"; //const sheet = spread.getSheet(0); const excelIO = new IO(); const json = JSON.stringify(spread.toJSON({ includeBindingSource: true, columnHeadersAsFrozenRows: true, })); excelIO.save(json, (blob) => { saveAs(blob, fileName); }, function (e) { console.log(e) }); }

Voici ce que fait le code : tout d'abord, nous obtenons une référence à notre fiche technique de vente. Puisqu'il s'agit de la seule feuille de notre feuille de calcul, elle réside à l'index 0 et nous y accédons en appelant getSheet. Cela peut être utilisé ailleurs dans la fonction si nous devons interagir directement avec la feuille.

Nous instancions ensuite la bibliothèque ExcelIO de SpreadJS, convertissons notre feuille en JSON et demandons à SpreadJS de la sauvegarder. Voilà ! Nous avons exporté un fichier Excel à partir de notre application Vue compatible avec les feuilles de calcul !

Notez que nous transmettons deux options de sérialisation à l'appel toJSON de la feuille : includeBindingSource et columnHeadersAsFrozenRows. Ensemble, ces options garantissent que les données que nous avons liées à la feuille sont exportées correctement et que la feuille contient nos en-têtes de colonnes. Ainsi, en regardant le fichier Excel exporté, vous comprendrez chaque colonne.

Ajout de l'importation Excel

Ensuite, il est temps d'ajouter la possibilité d' importer des fichiers Excel.

Juste en dessous de notre bouton d'exportation, nous allons ajouter le balisage suivant :

 <div> <b>Import Excel File:</b> <div> <input type="file" class="fileSelect" @change='fileChange($event)' /> </div> </div>

Comme vous pouvez le voir, nous utiliserons un sélecteur de fichiers HTML standard et déclencherons une méthode de composant nommée fileChange lorsqu'un fichier est sélectionné.

Maintenant que nous avons ajouté le modèle, ajoutons le gestionnaire de modifications à l'objet méthodes de notre composant :

 fileChange: function (_e_) { if (this._spread) { const fileDom = e.target || e.srcElement; const excelIO = new Excel.IO(); const spread = this._spread; const store = this.$store; /*const deserializationOptions = { includeBindingSource: true, frozenRowsAsColumnHeaders: true };*/ excelIO.open(fileDom.files[0], (_data_) => { // Used for simply loading the JSON from a file //spread.fromJSON(data, deserializationOptions); var newSalesData = extractSheetData(data); store.commit('IMPORT_RECENT_SALES', newSalesData) }); } }

Importer un fichier Excel revient à l’exporter, sauf dans le sens inverse. Une fois un fichier choisi, nous demandons à ExcelIO de l'importer. Une fois terminé, il transmet les informations de la feuille à une fonction de rappel en tant qu'objet JavaScript. Ensuite, nous transmettons les données importées via une fonction personnalisée pour en extraire les données dont nous avons besoin, puis les renvoyer dans le magasin Vuex.

En règle générale, l'importation d'un fichier est aussi simple que d'appeler cette méthode ouverte ExcelIO mais en utilisant la méthode du classeur « fromJSON ». Dans ce cas, nous souhaitons simplement analyser les données du fichier importé et mettre à jour le magasin, qui mettra ensuite à jour SpreadJS.

Dans notre fonction extractSheetData, que vous trouverez dans le fichier src/util.util.js, vous verrez que nous extrayons les données de l'objet JavaScript renvoyé par ExcelIO et les restructurons pour qu'elles correspondent à la forme des données dans notre Vuex. magasin.

Notre fonction d'importation suppose que les données de la feuille importée auront les mêmes colonnes que notre ensemble de données d'origine. Si quelqu'un télécharge une feuille de calcul qui ne répond pas à cette exigence, notre application ne sera pas en mesure de la gérer. Il s’agit d’une limitation acceptable dans la plupart des applications métier. Étant donné que notre tableau de bord est conçu pour afficher un type de données spécifique, il est raisonnable de demander aux utilisateurs de fournir des données dans le format attendu par l'application.

Une fois l'extraction des données terminée, nous appelons commit sur la boutique Vuex et envoyons les données de transaction de vente mises à jour. La feuille SpreadJS et les panneaux du tableau de bord se mettent ensuite à jour pour refléter les nouvelles données. Nous pouvons en fait utiliser une fonction de mutation différente pour l'importation par rapport à une valeur modifiée afin de pouvoir l'ajouter au fichier main.js sous le nom « IMPORT_RECENT_SALES » :

 const store = new Vuex.Store({ state: { recentSales }, mutations: { UPDATE_RECENT_SALES(state) { state.recentSales.push([]); state.recentSales.pop(); }, IMPORT_RECENT_SALES(state, sales) { state.recentSales = sales; } } });

Tester votre application Vue

Maintenant que vous avez vu le code, testons l'importation et l'exportation Excel dans notre application Vue.

Commencez par cliquer sur le bouton « Exporter vers Excel ». Votre navigateur Web téléchargera ensuite une feuille de calcul Excel contenant toutes les données que nous avons vues dans la feuille de calcul de notre tableau de bord.

Ouvrez la feuille dans Excel et ajoutez quelques lignes de données. Ce n'est pas grave si vous utilisez de nouveaux pays ou de nouveaux vendeurs ; tous nos composants de tableau de bord peuvent le gérer. Faites simplement attention à ne pas modifier l’ordre ou les noms des colonnes. Lorsque vous avez terminé, cliquez sur le bouton « Choisir un fichier » en bas du panneau Ventes récentes. Sélectionnez le fichier Excel que vous venez de modifier.

Lorsque vous sélectionnez le fichier, vous verrez les composants du tableau de bord mis à jour.

Conclusion

Avaient fini! Nous avons pris une application de tableau de bord Vue ordinaire et y avons ajouté une feuille de calcul en direct. Nous pouvons maintenant modifier les données de la feuille et regarder l'intégralité de notre tableau de bord se mettre à jour. Notre tableau de bord amélioré est également capable d'importer et d'exporter des fichiers Excel.

Vue, Vuex et SpreadJS se complètent bien. Grâce aux modèles et à la liaison de données simples de Vue, au magasin de données réactif de Vuex et aux feuilles de calcul interactives de SpreadJS, des applications JavaScript d'entreprise complexes peuvent être créées en quelques heures.

Aussi génial que cela puisse paraître, nous avons à peine effleuré la surface de ce que SpreadJS peut faire. Pour mieux comprendre ce que SpreadJS peut faire pour vous, reportez-vous aux démos SpreadJS , qui incluent des démos complètes des différentes fonctionnalités de SpreadJS, des explications et du code en direct présentant ces fonctionnalités. Si vous souhaitez approfondir l'utilisation de SpreadJS dans vos propres applications, la documentation SpreadJS contient les informations dont vous avez besoin.

Apprenez-en davantage sur ce composant de feuille de calcul JavaScript :