So aktualisieren und synchronisieren Sie Daten dynamisch über Vue und Excel

So aktualisieren und synchronisieren Sie Daten dynamisch über Vue und Excel

Vorwort:
In der täglichen Arbeit und im Leben müssen wir oft große Datenmengen verarbeiten und verwalten. Als leistungsstarke Tabellenkalkulationssoftware ist Excel zu einem unserer am häufigsten verwendeten Tools geworden. Nach und nach zeigen sich jedoch die Einschränkungen von Excel, wie z. B. unzureichende Datenaktualisierungen in Echtzeit und Schwierigkeiten bei der kollaborativen Bearbeitung. Um diese Probleme zu lösen, können wir durch die Kombination von Vue und Excel eine dynamische Aktualisierung und Synchronisierung von Daten erreichen. In diesem Artikel wird erläutert, wie Sie Vue und Excel zum Implementieren dieser Funktion verwenden, und entsprechende Codebeispiele als Referenz bereitgestellt.

Schritt 1: Vorbereitung
Zuerst müssen wir die erforderliche Software und Umgebung vorbereiten. Wir müssen die folgenden Tools installieren:

1. Vue.js: ein JavaScript-Framework zum Erstellen von Benutzeroberflächen, das hauptsächlich zur Implementierung von Front-End-Logik verwendet wird.
2. Element-UI: Ein auf Vue.js basierendes Desktop-UI-Framework, das eine Reihe von Komponenten zur Erleichterung der Seitenkonstruktion und -gestaltung bereitstellt.
3. ExcelJS: Eine Bibliothek zum Lesen und Schreiben von Excel-Dateien im Browser, die Excel-Dateioperationen in mehreren Formaten unterstützt.

Schritt 2: Vue-Projekt und Excel-Datei erstellen
Als nächstes müssen wir ein Vue-Projekt erstellen und eine Excel-Datei im Projektverzeichnis als Quelldatei für die Datenspeicherung hinzufügen. Ein Vue-Projekt kann mit dem folgenden Befehl erstellt werden:

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

Anschließend können Sie mit der Excel-Software eine Excel-Datei erstellen, diese als „data.xlsx“ speichern und im „public“-Verzeichnis des Projekts ablegen.

Schritt 3: Erforderliche Abhängigkeitspakete installieren
Nachdem wir das Projektverzeichnis betreten haben, müssen wir die beiden Abhängigkeitspakete ExcelJS und Element-UI installieren. Es kann mit dem folgenden Befehl installiert werden:

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

Schritt 4: Schreiben Sie den Code
Als nächstes beginnen wir mit dem Schreiben des Codes. Erstellen Sie zunächst einen Ordner mit dem Namen „components“ im Verzeichnis „src“ des Vue-Projekts und erstellen Sie in dem Ordner eine Datei mit dem Namen „Excel.vue“.

In der Excel.vue-Datei müssen wir die folgenden Arbeiten ausführen:

1. Führen Sie die Element-UI-Komponentenbibliothek und die ExcelJS-Bibliothek ein:

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

2. Definieren Sie die erforderlichen Daten in der Datenoption der Komponente:

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

3. Schreiben Sie Methoden in die Methodenoption der Komponente für Vorgänge zum Öffnen und Speichern von Excel-Dateien:

   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. Schreiben Sie den Code für Seitenlayout und Tabellenkomponenten in die Vorlagenoption der Komponente:

   <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. Endlich , müssen Sie die Komponente im Skript-Tag der Komponente exportieren:

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

Schritt 5: Führen Sie das Projekt aus
Nach Abschluss der obigen Schritte können wir das Projekt ausführen. Führen Sie im Projektverzeichnis den folgenden Befehl aus:

npm run serve

Besuchen Sie dann http://localhost:8080 im Browser und Sie sehen eine Seite mit Funktionen zum Öffnen und Speichern von Excel-Dateien. Klicken Sie auf die Schaltfläche „Excel-Datei öffnen“, wählen Sie die zuvor vorbereitete Excel-Datei aus und die Daten in der Excel-Datei werden auf der Seite angezeigt. Wir können die Daten ändern und bearbeiten und dann auf die Schaltfläche „Excel-Datei speichern“ klicken. Die Daten werden dann automatisch mit der Excel-Datei synchronisiert.

Zusammenfassung:
In diesem Artikel wird erläutert, wie Sie Daten über Vue und Excel dynamisch aktualisieren und synchronisieren. Durch die Verwendung von Vue und der ExcelJS-Bibliothek können wir problemlos Excel-Dateien lesen und schreiben und die Daten in der Excel-Datei in Echtzeit auf unserer Vue-Seite anzeigen. Auf diese Weise können wir nicht nur große Datenmengen schneller verarbeiten und verwalten, sondern auch problemlos mit anderen zusammenarbeiten, um Daten zu bearbeiten und so die Arbeitseffizienz und Datengenauigkeit zu verbessern. Ich hoffe, dieser Artikel ist für alle hilfreich!

Das obige ist der detaillierte Inhalt vonSo aktualisieren und synchronisieren Sie Daten dynamisch über Vue und Excel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!