Detaillierte Schritte zur Implementierung der Excel-Importfunktion in Vue

1. Front-End-geführte Implementierungsschritte

Der erste Schritt besteht darin, auf der Seite auf die Schaltfläche „Importieren“ zu klicken, um die Excel-Datei zu lesen

Durch die Verwendung von Plugins abgeschlossen.

Der zweite Schritt besteht darin, das Datenformat entsprechend den Anforderungen des Backends zu verarbeiten und in das benötigte Format zu konvertieren.

Sie müssen die Logik selbst schreiben.

Der dritte Schritt besteht darin, die Daten per Ajax über die Backend-Schnittstelle zurückzusenden

Passen Sie die Schnittstelle an und führen Sie normale Vorgänge aus.

Kurz gesagt: Das Frontend liest die Excel-Datei, ändert das Dateiformat und ruft die Schnittstelle auf

2. Excel-Dateien lesen

Hinweis: Mit diesem Schritt kann die Front-End-Importfunktion realisiert werden. Wenn Sie das Format ändern möchten, können Sie mit Schritt 3 fortfahren.

Zusammenfassung: Kopieren Sie den Code in Ihren eigenen Ordner und laden Sie die erforderlichen Plugins herunter.

2.1 Die von elementUI bereitgestellte Upload-Methode im vue-admin-element wird verwendet (Baidu Warehouse-Klonmethode, die auch auf der offiziellen Website verfügbar ist).

2.2 Laden Sie das Paket npm install xlsx -S herunter (standardmäßig ist Schritt 2.1 abgeschlossen)

2.3 Führen Sie die UploadExcel-Komponente ein und registrieren Sie sie als global (suchen Sie UploadExcel這個文件，復制一下，封裝組件不必多說).

Wenn Sie nicht wissen, wie Sie globale Komponenten registrieren, sehen Sie sich den folgenden Code an: (Sie können dies in main.js tun, wenn Sie möchten, aber ich werde es hier tun, um die Wartbarkeit zu erhöhen.)

importiere PageTools aus „./PageTools“
UploadExcel aus „./UploadExcel“ importieren
 
Standard exportieren {
  // Initialisierung des Plugins. Die vom Plugin bereitgestellten globalen Funktionen können hier konfiguriert werden install(Vue) {
    // Globale Registrierung von Komponenten Vue.component('PageTools', PageTools) // Toolbar-Komponente registrieren Vue.component('UploadExcel', UploadExcel) // Importierte Excel-Komponente registrieren }
} 

  2.4 Komponenten einführen, Komponenten verwenden, Routen konfigurieren und Klick-Callback-Funktionen festlegen (mehr muss nicht gesagt werden)

2.5 Testergebnisse

Geben Sie die Routing-Adresse, die Sie im Browser festgelegt haben, manuell ein. Die Seite springt dann dorthin.

Zusammenfassung: 1. Das Wichtigste ist, die erforderlichen Plug-Ins zu kopieren und dann herunterzuladen

2. Es ist notwendig, die UploadExcel-Komponente einzuführen (um Excel-Dateien zu importieren), aber es ist nicht notwendig, sie global zu registrieren, je nach Lust und Laune

3. Importieren Sie die Komponente und registrieren Sie die Rückruffunktion. Die beiden darin enthaltenen Parameter sind obligatorisch. Zum besseren Verständnis können Sie den Quellcode zu Rate ziehen.

4. Das Wesentliche des Excel-Import-Plugins: Konvertieren Sie Excel in reguläre Daten, die nach der Analyse von JS erkannt werden können, und wir können beliebige Vorgänge an den Daten ausführen

3. Daten verarbeiten

Hinweis: Dieser Schritt testet eigentlich Ihre Fähigkeit, JavaScript zu verwenden. Leider fällt mir das nicht schwer und ich glaube, dass es mir auch lange Zeit nicht schwer fallen wird.

3.1 Vom Backend benötigtes Format:

3.2 Was wir verarbeiten:

• Konvertieren Sie chinesische Felder in Englische.姓名wird in Excel eingelesen, das Backend benötigt jedoch username
• Datenverarbeitung. Die aus Excel ausgelesene Zeit ist ein Zahlenwert, während das Backend ein Standarddatum benötigt.

3.3 Eine Verarbeitungsfunktion separat kapseln:

/**
     * Inhalt der Excel-Tabelle mit den Ergebnissen // [ {'Name': 'Xiao Zhang', 'Mobiltelefonnummer': '13712345678'}, {.....} ]
      // Ziel// [ {'Benutzername': 'Xiao Zhang', 'Mobiltelefon': '13712345678'}, {.....} ]
     */
    transExcel(Ergebnisse) {
      const BenutzerRelations = {
        'Datum des Stelleneintritts': 'Zeit des Stelleneintritts',
        'Mobilnummer': 'Mobiltelefon',
        'Name': 'Benutzername',
        'Korrekturdatum': 'Korrekturzeit',
        'Arbeitsnummer': 'Arbeitsnummer',
        'Abteilung': 'Abteilungsname',
        'Beschäftigungsform': 'formOfEmployment'
      }
      Ergebnisse zurückgeben.map(item => {
        const obj = {}
        // 1. Alle Attributnamen dieses Objekts abrufen: ['Name', 'Telefonnummer']
        // 2. Durchlaufe dieses Array, suche in userRelations nach dem entsprechenden englischen Namen über den chinesischen Namen und speichere den Wert const zhKeys = Object.keys(item)
        zhKeys.forEach(zhKey => {
          const enKey = BenutzerRelations[zhKey]
          // Wenn es im Zeitformat vorliegt, konvertieren Sie es, wenn (enKey === 'correctionTime' || enKey === 'timeOfEntry') {
            obj[enKey] = neues Datum(formatExcelDate(item[zhKey]))
          } anders {
            Objekt[enKey] = Element[zhKey]
          }
        })
 
        Rückgabeobjekt
      })
    }
 
handleSuccess({ Ergebnisse, Header }) {
    
  console.log('Der aus der aktuellen Excel-Datei gelesene Inhalt ist', Ergebnisse)
  // Ergebnisse: [{Beitrittsdatum: 44502, Name: xxxx}]
  // Ziel:
  // Ergebnisse: [{timeOfEntry: 44502, Benutzername: xxxx}]
  // Verarbeite das aus Excel gelesene Format const arr = this.transExcel(results)
  console.log('Das Format nach der Konvertierung ist', arr)
})

3.4 Datenverarbeitungsfunktionen:

// Konvertieren Sie das Datumsformat in der Excel-Datei zurück zur Standardzeit // https://blog.csdn.net/qq_15054679/article/details/107712966
Exportfunktion formatExcelDate(Anzahl, Format = '/') {
  const Zeit = neues Datum((Zahl - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000 - 8 * 3600000)
  Zeit.setYear(Zeit.getFullYear())
  const jahr = zeit.getFullYear() + ''
  const Monat = Zeit.getMonth() + 1 + ''
  const date = time.getDate() + ''
  wenn (Format && Format.Länge === 1) {
    Jahr + Format + Monat + Format + Datum zurückgeben
  }
  gibt Jahr + (Monat < 10 ? '0' + Monat : Monat) + (Datum < 10 ? '0' + Datum : Datum) zurück
}

4. Rufen Sie die Schnittstelle auf, senden Sie eine Anfrage und verwenden Sie sie auf der Seite

importiere { importEmployee } von '@/api/employees'
Standard exportieren {
  Name: 'Importieren',
  Methoden: {
    async handleSuccess({ Ergebnisse, Header }) {
      versuchen {
        console.log('Der aus der aktuellen Excel-Datei gelesene Inhalt ist', Ergebnisse)
        // Ergebnisse: [{Beitrittsdatum: 44502, Name: xxxx}]
        // Ziel:
        // Ergebnisse: [{timeOfEntry: 44502, Benutzername: xxxx}]
        const arr = this.transExcel(Ergebnisse)
        console.log('Das Format nach der Konvertierung ist', arr)
        //Upload-Schnittstelle aufrufen,
        const rs = warte auf importEmployee(arr)
        console.log('Upload-Schnittstelle aufrufen', rs)
        // Nach erfolgreichem Upload kehren Sie zur vorherigen Seite zurück this.$router.back()
        this.$message.success('Vorgang erfolgreich')
      } fangen (Fehler) {
        dies.$nachricht.fehler(fehler.nachricht)
      }
    }
}

5 Zusammenfassung:

Die Importfunktion ähnelt der Exportfunktion. Die Schwierigkeit liegt in der Konvertierung des Datenformats. Dieser Artikel stellt sie nicht im Detail vor, aber sie wird in einem anderen Exportartikel ausführlich erklärt. Wenn Sie interessiert sind, können Sie einen Blick darauf werfen. Klicken Sie hier, um zur Implementierung der Exportfunktion zu springen

Dies ist das Ende dieses Artikels über die Implementierung der Excel-Importfunktion in Vue. Weitere relevante Inhalte zum Vue-Import in Excel finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!