Comment mettre à jour et synchroniser dynamiquement les données via Vue et Excel

Comment mettre à jour et synchroniser dynamiquement les données via Vue et Excel

Avant-propos :
Dans le travail et la vie quotidienne, nous devons souvent traiter et gérer de grandes quantités de données. En tant que puissant tableur, Excel est devenu l’un de nos outils les plus couramment utilisés. Cependant, les limites d’Excel se révèlent progressivement, comme l’insuffisance de mise à jour des données en temps réel et la difficulté d’édition collaborative. Afin de résoudre ces problèmes, nous pouvons réaliser une mise à jour et une synchronisation dynamiques des données en combinant Vue et Excel. Cet article expliquera comment utiliser Vue et Excel pour implémenter cette fonction et fournira des exemples de code correspondants pour votre référence.

Étape 1 : Préparation
Tout d'abord, nous devons préparer le logiciel et l'environnement requis. Nous devons installer les outils suivants :

1. Vue.js : un framework JavaScript pour créer des interfaces utilisateur, principalement utilisé pour implémenter la logique front-end.
2. Element-UI : un framework d'interface utilisateur de bureau basé sur Vue.js, qui fournit une série de composants pour faciliter la construction et la conception de pages.
3. ExcelJS : une bibliothèque pour lire et écrire des fichiers Excel dans le navigateur, prenant en charge les opérations sur les fichiers Excel dans plusieurs formats.

Étape 2 : Créer un projet Vue et un fichier Excel
Ensuite, nous devons créer un projet Vue et ajouter un fichier Excel dans le répertoire du projet comme fichier source pour le stockage des données. Un projet Vue peut être créé avec la commande suivante :

vue create excel-demo   // 创建Vue项目
cd excel-demo   // 进入项目目录

Ensuite, vous pouvez utiliser le logiciel Excel pour créer un fichier Excel, l'enregistrer sous "data.xlsx", et le placer dans le répertoire "public" du projet.

Étape 3 : Installez les packages de dépendances requis
Après être entré dans le répertoire du projet, nous devons installer les deux packages de dépendances ExcelJS et Element-UI. Il peut être installé avec la commande suivante :

npm install exceljs element-ui --save   // 安装ExcelJS和Element-UI

Étape 4 : Écrivez le code
Ensuite, nous commençons à écrire le code. Tout d'abord, créez un dossier nommé "components" dans le répertoire "src" du projet Vue, et créez un fichier nommé "Excel.vue" dans le dossier.

Dans le fichier Excel.vue, nous devons effectuer le travail suivant :

1. Introduire la bibliothèque de composants Element-UI et la bibliothèque ExcelJS :

   <script>
   import { Button, Table, TableColumn } from 'element-ui';
   import ExcelJS from 'exceljs';
   ...
   </script>

2. Définir les données requises dans l'option data du composant :

   data() {
     return {
    workbook: null,  // Excel工作薄对象
    worksheet: null,  // Excel工作表对象
    tableData: [],  // 表格数据
     }
   },

3. Écrire les méthodes dans l'option méthodes du composant pour les opérations d'ouverture et d'enregistrement de fichiers Excel :

   methods: {
     openExcelFile() {
    const reader = new FileReader();
   
    // 读取Excel文件
    reader.onload = (e) => {
      const data = new Uint8Array(e.target.result);
   
      this.workbook = new ExcelJS.Workbook();
      this.workbook.xlsx.load(data).then(this.loadExcelData);
    }
   
    // 弹出文件选择框
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.xlsx';
   
    input.onchange = () => {
      const file = input.files[0];
      reader.readAsArrayBuffer(file);
    }
   
    input.click();
     },
     saveExcelFile() {
    const buffer = await this.workbook.xlsx.writeBuffer();
    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.download = 'data.xlsx';
    downloadLink.click();
     },
     loadExcelData() {
    this.worksheet = this.workbook.getWorksheet(1);
    const columns = this.worksheet.getRow(1).values;
    const rows = this.worksheet.getRows(2, this.worksheet.rowCount);
   
    this.tableData = rows.map(row => {
      const rowData = row.values;
      return rowData.reduce((obj, value, index) => {
        obj[columns[index]] = value;
        return obj;
      }, {});
    });
     },
     ...
   }

4. Écrire le code des composants de mise en page et de tableau dans l'option modèle du composant :

   <template>
     <div>
    <el-button type="primary" @click="openExcelFile">打开Excel文件</el-button>
    <el-button type="success" @click="saveExcelFile">保存Excel文件</el-button>
    <el-table :data="tableData">
      <el-table-column v-for="(value, key) in tableData[0]" :key="key" :label="key" :prop="key"></el-table-column>
    </el-table>
     </div>
   </template>

5. Enfin , vous devez exporter le composant dans la balise script du composant :

   export default {
     components: {
    Button,
    Table,
    TableColumn,
     },
     ...
   }
   </script>

Étape 5 : Exécuter le projet
Après avoir terminé les étapes ci-dessus, nous pouvons exécuter le projet. Exécutez la commande suivante dans le répertoire du projet :

npm run serve

Ensuite, visitez http://localhost:8080 dans le navigateur et vous verrez une page avec des fonctions d'ouverture et d'enregistrement de fichiers Excel. Cliquez sur le bouton "Ouvrir le fichier Excel", sélectionnez le fichier Excel préparé précédemment et les données du fichier Excel seront affichées sur la page. Nous pouvons modifier et éditer les données, puis cliquer sur le bouton "Enregistrer le fichier Excel", et les données seront automatiquement synchronisées avec le fichier Excel.

Résumé :
Cet article explique comment mettre à jour et synchroniser dynamiquement les données via Vue et Excel. En utilisant Vue et la bibliothèque ExcelJS, nous pouvons facilement lire et écrire des fichiers Excel et afficher les données du fichier Excel sur notre page Vue en temps réel. De cette manière, nous pouvons non seulement traiter et gérer de grandes quantités de données plus rapidement, mais également collaborer facilement avec d'autres pour modifier les données, améliorant ainsi l'efficacité du travail et la précision des données. J'espère que cet article sera utile à tout le monde !

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!