So importieren Sie Excel-Dateien mit benutzerdefinierten Feldern in Vue

Mit der kontinuierlichen Weiterentwicklung der Internet-Technologie müssen immer mehr Unternehmen riesige Datenmengen verwalten und analysieren, und viele dieser Daten liegen in Form von Excel vor. Auf Vue basierende Webanwendungen müssen normalerweise Excel-Dateien für die Datenanalyse und Datenanwendung importieren. Vue verfügt über viele Bibliotheken, die Excel-Dateien importieren können, aber normalerweise entspricht das Datenformat von Excel-Dateien nicht unbedingt dem von uns benötigten Format, daher müssen wir Felder für die importierten Excel-Daten anpassen, um sie an unsere Datenintegrations- und Analyseanforderungen anzupassen. In diesem Artikel erfahren Sie, wie Sie benutzerdefinierte Felder in Excel-Dateien in Vue importieren.

1. Import von Excel-Dateien

In Vue-Anwendungen verwenden wir normalerweise einige Bibliotheken von Drittanbietern, um Excel-Dateien zu importieren. Zu diesen Tools gehören: ExcelJS, Xlsx usw. In diesem Artikel wird ExcelJS als Beispiel verwendet, um die Verwendung von Vue zum Importieren von Excel-Dateien vorzustellen. Zuerst müssen Sie das ExcelJS-Abhängigkeitspaket installieren:

npm install exceljs --save

Dann müssen Sie ExcelJS in die Vue-Komponente importieren:

import ExcelJS from 'exceljs';

Danach müssen wir ExcelJS verwenden, um die Excel-Datei zu laden. Hier verwenden wir das FileReader-Objekt von JavaScript, um dies zu erreichen.

export default {
  name: 'ImportExcel',
  data() {
    return {};
  },
  methods: {
    handleImportExcel(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const result = e.target.result;
        const workbook = new ExcelJS.Workbook();
        workbook.xlsx.load(result).then((book) => {
          // 处理Workbook对象
        });
      };
      reader.readAsArrayBuffer(file);
    },
  },
};

In diesem Beispiel haben wir die Methode handleImportExcel definiert, um das Lesen von Excel-Dateien zu verarbeiten, ein neues FileReader-Objekt über new FileReader() erstellt und die Excel-Datei als ArrayBuffer-Typ (Inhalt) gelesen, wodurch Probleme mit dem Dateikodierungsformat vermieden werden können .

ExcelJS unterstützt mehrere Dateiformate, einschließlich XLSX, XLS, CSV, ODS usw. Hier verwenden wir die Methode „load()“, um den Inhalt der Excel-Datei zu lesen und ein Workbook-Objekt zurückzugeben, das die Anfangsdaten für die benutzerdefinierten Spalten darstellt, die wir in Excel importieren.

2. Benutzerdefinierte importierte Spalten

Nachdem wir die Excel-Datei erfolgreich importiert haben, müssen die Daten vor der weiteren Integration der Daten gefiltert und durch benutzerdefinierte Spalten verarbeitet werden. Dieser Prozess kann mithilfe der berechneten Eigenschaften oder Filter von Vue implementiert werden, um unseren Datenanforderungen gerecht zu werden.

export default {
  name: 'ImportExcel',
  data() {
    return {};
  },
  methods: {
    handleImportExcel(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const result = e.target.result;
        const workbook = new ExcelJS.Workbook();
        workbook.xlsx.load(result).then((book) => {
          const worksheet = book.worksheets[0];
          const headers = [];
          worksheet.eachRow((row) => {
            if (row.number === 1) {
              row.eachCell((cell) => {
                headers.push(cell.value);
              });
            }
          });
          const data = [];
          worksheet.eachRow((row, rowNumber) => {
            if (rowNumber > 1) {
              const rowData = {};
              row.eachCell((cell, colNumber) => {
                const colName = headers[colNumber - 1];
                rowData[colName] = cell.value;
              });
              data.push(rowData);
            }
          });
          this.$emit('add-data', data);
        });
      };
      reader.readAsArrayBuffer(file);
    },
  },
};

In diesem Beispiel verwenden wir die ExcelJS-Methode, um das Arbeitsblattobjekt in der Excel-Datei zu lesen. Dann haben wir ein Header-Array erstellt, den Header der Excel-Datei mit der Methode everyRow() im Arbeitsblattobjekt durchlaufen und den Wert jeder Zelle im Header im Header-Array gespeichert. Anschließend durchläuft es mithilfe der Methoden everyRow() und everyCell() die Zeilen und Spalten von Excel, ordnet die Daten jeder Zelle in der Zeile dem Header-Array zu und speichert die Ergebnisse im rowData-Objekt. Schließlich werden die rowData im Datenarray gespeichert und schließlich werden die Daten über die $emit()-Methode von Vue an die übergeordnete Komponente übergeben.

3. Rendering benutzerdefinierter Spalten

Nach dem erfolgreichen Import der Excel-Datei können wir die Daten mit benutzerdefinierten Spalten frei filtern und verarbeiten. In Vue können Sie berechnete Eigenschaften oder Filter verwenden, um eine benutzerdefinierte Verarbeitung von Daten zu implementieren.

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in filteredData" :key="index">
        <td>{{ row.id }}</td>
        <td>{{ row.name }}</td>
        <td>{{ row.age }}</td>
        <td>{{ row.gender }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: "CustomFields",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    headers() {
      const firstRow = this.data[0];
      return Object.keys(firstRow);
    },
    filteredData() {
      return this.data.map((item) => {
        return {
          id: item.ID,
          name: item.Name,
          age: item.Age,
          gender: item.Gender === "M" ? "男" : "女",
        };
      });
    },
  },
};
</script>

In diesem Beispiel erhalten wir die Header-Informationen der übergebenen Daten über die berechneten Attribut-Header. In filteredData filtern und verarbeiten wir benutzerdefinierte Spalten für jede Datenzeile und führen eine Sekundärverarbeitung für die ursprünglichen Felder wie ID, Name, Alter und Geschlecht durch.

4. Zusammenfassung

In diesem Artikel wird erläutert, wie Sie Excel-Dateien in VueWeb-Anwendungen importieren und importierte Daten mit benutzerdefinierten Spalten verarbeiten. Wir verwenden die ExcelJS-Toolbibliothek, um den Inhalt von Excel-Dateien zu lesen, und verwenden berechnete Eigenschaften oder Filter in Vue-Komponenten, um eine benutzerdefinierte Spaltenverarbeitung für importiertes Excel zu implementieren. Diese Technologien werden es uns ermöglichen, Excel-Dateidaten effizienter und flexibler zu verarbeiten und zu nutzen.

Das obige ist der detaillierte Inhalt vonSo importieren Sie Excel-Dateien mit benutzerdefinierten Feldern in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!