Der gesamte Prozessbericht der Vue-Exportfunktion für Excel

1. Front-End-Führungsprozess:

1. Klicken Sie auf der Seite auf die Schaltfläche „Exportieren“ (Klickereignis registrieren).

2. Senden Sie im Event-Callback eine Anfrage nach Hintergrunddaten

3. Verarbeiten Sie die Hintergrunddaten, um den gewünschten Effekt zu erzielen

4. Excel-Datei generieren

2. Plugin-Nutzung und Initialisierung

2.1 Mithilfe der in vue-admin bereitgestellten Methoden.

Kopieren Sie das Plugin-Paket und fügen Sie es in den src-Ordner Ihres Projekts ein.

2.2 Installieren Sie Plugin-Abhängigkeiten.

Hinweis: Es besteht eine hohe Wahrscheinlichkeit, dass ein Fehler gemeldet wird. Jeder Fehler in dieser Phase wird grundsätzlich dadurch verursacht, dass Abhängigkeiten nicht installiert wurden. Installieren Sie sie einfach alle.

npm installiere Dateisparer, Skriptlader --save

2.3 Der Inhalt der Rückruffunktion ist wie folgt

Wenn wir offiziell auf die Schaltfläche „Exportieren“ klicken, laden wir das Modul „Export2Excel“ in den Vendor-Ordner.

Wenn wir offiziell auf die Schaltfläche „Exportieren“ klicken, laden wir das Export2Excel-Modul im Vendor-Ordner import('@/vendor/Export2Excel').then(excel => {
  // Excel stellt das importierte Modulobjekt dar //Die Importmethode gibt nach der Ausführung ein Promise-Objekt zurück.
                                 // In der then-Methode können wir das verwendete Modulobjekt abrufen console.log(excel)
  excel.export_json_to_excel({
    Header: ['Name', 'Gehalt'], // Erforderliche Header-Daten: [
      ['Liu Bei', 100], // Konzentrieren wir uns auf den Konfigurationsteil der Daten. Wir stellen fest, dass hierfür ein striktes zweidimensionales Array erforderlich ist ['Guan Yu', 500]
    ], // Bestimmte Daten erforderlich filename: 'excel-list', // Dateiname autoWidth: true, // Ob die Breite adaptiv ist bookType: 'xlsx' // Generierter Dateityp })
})

Beschreibung der Excel-Exportparameter

Hinweis: Bis zu diesem Punkt wurde ein einfacher Exporteffekt unter Verwendung von mir selbst geschriebener Fake-Daten abgeschlossen. Im eigentlichen Projekt müssen wir die vom Hintergrund zurückgegebenen Daten verwenden und das Format ändern, um den gewünschten Effekt zu erzielen (es wurde getestet und die obigen Schritte können befolgt werden, um es abzuschließen.) Der Effekt ist wie folgt:

3. Verarbeiten Sie die Hintergrunddaten, um den gewünschten Effekt zu erzielen

Beispielsweise ist die vom Hintergrund zurückgegebene Tabellenüberschrift auf Englisch und muss ins Chinesische konvertiert werden, das Format entspricht jedoch nicht dem vom Plug-In benötigten Format.

Backend-Rückgabedaten:

Der Schlüssel muss ins Chinesische konvertiert und der Wert in einem Array erfasst werden.

3.1 Bereiten Sie eine Datenverarbeitungsfunktion vor (die am Ende im Rückruf verwendet wird).

3.2 Verarbeiten Sie zuerst den Tabellenkopf und definieren Sie ein Objekt, um den englischen Kopf später ins Chinesische zu konvertieren

const Karte = {
        'id': 'Nummer',
        'password': 'Passwort',
        'mobile': 'Mobiltelefonnummer',
        'Benutzername': 'Name',
        'timeOfEntry': 'Datum des Stelleneintritts',
        'formOfEmployment': 'Beschäftigungsformular',
        'correctionTime': 'Korrekturdatum',
        'workNumber': 'Arbeitsnummer',
        'departmentName': 'Abteilung',
        'staffPhoto': 'Avatar-Adresse'
      }

3.3 Definieren Sie den Header

header = [Der englische Header wird später ins Chinesische konvertiert, in Form eines Arrays]

Der Effekt wird im folgenden Code gezeigt:

Header = ['ID', 'Mobiltelefon', 'Benutzername', ……]

3.4 So verarbeiten Sie die Hintergrundrückgabedaten

Der Hintergrund gibt ein Array zurück und definiert einen als ersten Datenwert. Der Zweck besteht darin, den Header mit den ersten Daten als Beispiel festzulegen. Wenn die ersten Daten falsch sind, bedeutet dies, dass der Hintergrund nichts zurückgibt und das gesamte Spiel endet.

Der Effekt wird im folgenden Code gezeigt:

const eins = Liste[0]
      wenn (!eins) {
        return { Header, Daten }
      }

3.5 Header-Verarbeitungslogik

01 `Object.keys(one) ` Dies durchläuft das Objekt und extrahiert die Schlüssel, um ein Array zu bilden.

02 Die Methode `map` durchläuft jedes Element und gibt ein Array zurück

03 `return map[key]` kann als map.id = 'number' angesehen werden (leicht verständlich); die Map-Methode macht weiterhin Dinge mit dem Map-Objekt und map[key] ist tatsächlich der Wert, wie etwa 'number', 'department'... und bildet dann ein Array wie etwa: ['name', 'salary']

Header = Objekt.Schlüssel(eins).Map(Schlüssel => {
        Karte zurückgeben [Schlüssel]
      })

3.6 Logik zur Verarbeitung von Tabellendaten

Ziel: Der Hintergrund gibt formelle und informelle Mitarbeiter zurück, die durch 1 und 2 dargestellt werden. Wir müssen die Zahlen in Text umwandeln und in ein Array-Format bringen.

01-Zuerst ist das vom Backend zurückgegebene Obj['formOfEmployment'] die Nummer 1, 2. Wir möchten, dass sie zu ---> 'formal', 'informal' werden.

02-obj['formOfEmployment'] = hireTypEnmu[key] Dieser Code bedeutet, dass die chinesischen Schriftzeichen auf die Zahlen auf der linken Seite gesetzt werden, um eine Ersetzung zu erreichen. Schauen wir uns an, was links und rechts jeweils darstellen.

03- obj['formOfEmployment'] ist zu diesem Zeitpunkt eine Nummer

04-hireTypEnmu:{1:'formal', '2':'informal'}Dies ist ein Objekt, das wir selbst definiert haben

05-hireTypEnmu[Schlüssel] --Schlüssel ist eine Zahl -- sein Wert ist also ein chinesisches Zeichen

Der Effekt wird im folgenden Code gezeigt:

// data konvertiert jedes Objekt in der Liste in ein entsprechendes Werte-Array // hireTypEnmu:{1:'formal', '2':'informal' }
      Daten = Liste.Karte(Objekt => {
        // Obj['Beschäftigungsform']: 1, 2 ---> 'formell', 'informell'
        const key = obj['Beschäftigungsform'] // 1, 2
        obj['formOfEmployment'] = hireTypEnmu[Schlüssel]
 
        gibt Objekt.Werte(Objekt) zurück
      })

3.7 Funktionsrückgaben

Rückgabe der verarbeiteten Daten

return { Header, Daten }

3.8 Endgültige Fertigstellung

Nehmen Sie diese Funktion zu diesem Zeitpunkt in die Rückruffunktion auf, und der Header und die Daten sind bereits vorhanden.

Der vollständige Code lautet wie folgt:

hExport() {
      importiere('@/vendor/Export2Excel').dann(async excel => {
        // Senden Sie eine Ajax-Anfrage, um Daten abzurufen. const res = await getEmployee(this.page, this.size)
        const Liste = res.data.rows
        console.log('Vom Backend erhaltene Daten', Liste)
 
        const { Header, Daten } = this.formatData(Liste)
        // Excel stellt das importierte Modulobjekt dar console.log(header, data)
        excel.export_json_to_excel({
          // Header: ['Name', 'Gehalt'], // Header erforderlich Header: Header, // Header erforderlich Daten: Daten,
          filename: 'excel-list', // Dateiname autoWidth: true, // ob die Breite adaptiv ist bookType: 'xlsx' // generierter Dateityp })
      })
    },

Zusammenfassen:

Der obige Code wurde getestet und kann direkt verwendet werden, um den Effekt zu erzielen.

Anhang: vue-element-admin wird aus der Code-Cloud gezogen. Diese Version verfügt über mehr sekundäre Entwicklungsfunktionen.

# git clone https://github.com/panjiachen/vue-element-admin.git # Code von Github abrufen$ git clone https://gitee.com/mirrors/vue-element-admin.git # Aus der Code-Cloud abrufen$ cd vue-element-admin # Zum angegebenen Verzeichnis wechseln$ npm install # Alle Abhängigkeiten installieren$ npm run dev # Entwicklungs- und Debugmodus starten. Überprüfen Sie die Skripte in der Datei package.json, um den Startbefehl zu erfahren.

Dies ist das Ende dieses Artikels über die Excel-Exportfunktion von Vue. Weitere relevante Inhalte zur Excel-Exportfunktion von Vue finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!