Detaillierte Erläuterung des Excel-Parsings und -Exports basierend auf Vue

   <!-- Schaltfläche „Datei hochladen“ -->
   <div Klasse="Schaltflächenfeld">
     <el-hochladen
       Aktion
       akzeptieren=".xlsx, .xls"
       :auto-upload="false"
       :Dateiliste anzeigen="false"
       :bei-Änderung="Griff"
     >
       <el-button type="primary" slot="trigger">EXCEL-Datei auswählen</el-button>
     </el-upload>

     <el-button type="success" @click="submit" :disabled="disable">Daten sammeln und übermitteln</el-button>
   </div>

   <!-- Analysierte Daten-->
   <div Klasse="tableBox" v-show="anzeigen">
     <h3>
       <i Klasse="el-icon-info"></i>
       Meine Liebe, im Folgenden sind die Daten aufgeführt, die erfasst wurden. Nachdem Sie überprüft haben, dass sie korrekt sind, klicken Sie bitte auf die Schaltfläche „Gesammelte Daten übermitteln“, um sie auf den Server hochzuladen!
     </h3>

     <el-table :data="tempData" style="width: 100%" :height="Höhe" border>
       <el-table-column prop="name" label="Name" min-width="50%"></el-table-column>
       <el-table-column prop="phone" label="Telefon" min-width="50%"></el-table-column>
     </el-Tabelle>
   </div>

// Lies die Datei im Binärformat export function readFile(file) {
    gib ein neues Versprechen zurück (Auflösen => {
        : Der Reader kann nicht mit anderen Dateien verbunden werden.
        reader.readAsBinaryString(Datei);
        reader.onload = ev => {
             lösen(ev.target.result);
        };
    });
 }

  //Daten in DATEI lesen (in JSON-Format konvertieren)
  let data = warte auf readFile(Datei);
  let workbook = xlsx.read(data, { type: "binary" }),
    Arbeitsblatt = Arbeitsmappe.Arbeitsblätter[Arbeitsmappe.Arbeitsblattnamen[0]];
  Daten = xlsx.utils.sheet_to_json(Arbeitsblatt);
  // Drucken Sie die Ergebnisse aus und fügen Sie die folgende Abbildung hinzu console.log(workbook);

//Feldkorrespondenztabelle exportieren let character = {
        Name: {
            Text: "Name",
            Typ: "Zeichenfolge"
        },
        Telefon:
            Text: "Telefon",
            Typ: "Zeichenfolge"
        }
    };

   sei arr = [];
    Daten.fürJeden(Element => {
        lass obj = {};
        für (let-Eingabezeichen) {
          wenn (!character.hasOwnProperty(Schlüssel)) brechen;
          sei v = Zeichen[Schlüssel],
            text = v.text,
            Typ = v.Typ;
          v = Element[Text] || "";
          Typ === "Zeichenfolge"? (v = Zeichenfolge(v)): null;
          Typ === "Zahl"? (v = Zahl(v)): null;
          obj[Schlüssel] = v;
        }
      arr.push(Objekt);
    });

    //Daten an den Server senden async submit() {
      wenn (this.tempData.length <= 0) {
        diese.$nachricht({
          Meldung: "Mein Lieber, bitte wähle zuerst die EXCEL-Datei aus!",
          Typ: "Warnung",
          showClose: wahr
        });
        zurückkehren;
      }

      dies.deaktivieren = wahr;
      let loadingInstance = Wird geladen.service({
        Text: "Meine Liebe, bitte warte einen Moment. Ich arbeite sehr hart daran, damit fertig zu werden!",
        Hintergrund: "rgba(0,0,0,.5)"
      });

      // Was ist nach Abschluss zu tun? let complate = () => {
        diese.$nachricht({
          Nachricht: "Mein Lieber, ich habe die Daten für dich hochgeladen!",
          Typ: „Erfolg“,
          showClose: wahr
        });
        dies.show = falsch;
        dies.deaktivieren = falsch;
        wird geladenInstance.schließen();
      };

      // Die Daten müssen einzeln an den Server übergeben werden. let n = 0;
      lass send = async () => {
        wenn (n > this.tempData.length - 1) {
          // Alle bestanden complate();
          zurückkehren;
        }
        lass body = this.tempData[n];
        // Durch die Schnittstelle gehen let result = await createAPI(body);
        wenn (parseInt(Ergebniscode) === 0) {
          // Erfolg n++;
        }
        schicken();
      };
      schicken();
    }

  <div Klasse="Container">
    <!-- Schaltfläche "Hochladen" -->
    <div Klasse="Schaltflächenfeld">
      <router-link zu="/upload">
        <el-tooltip content="EXCEL-Datensammlung" placement="top">
          <el-button type="primary" icon="el-icon-edit" kreis></el-button>
        </el-tooltip>
      </Router-Link>
    </div>

    <!-- Suchbereich -->
    <div Klasse="Suchfeld">
      <el-input v-model="search" placeholder="Fuzzy-Suche basierend auf Name und Mobiltelefon" @change="searchHandle"></el-input>
      <el-button type="success" @click="submit" :disabled="disabled">Ausgewählte Daten exportieren</el-button>
    </div>

    <!-- Listenbereich -->
    <div Klasse="tableBox">
      <el-Tabelle
        :data="Tabellendaten"
        :Höhe="Höhe"
        Stil="Breite: 100%"
        v-loading="wird geladen"
        element-loading-text="Meine Dame, ich arbeite hart am Laden …"
        @selection-change="AuswahlÄnderung"
      >
        <el-table-column Typ="Auswahl" Breite="50" Ausrichtung="Mitte"></el-table-column>
        <el-table-column prop="id" label="Nummer" min-width="10%"></el-table-column>
        <el-table-column prop="name" label="Name" min-width="20%"></el-table-column>
        <el-table-column prop="phone" label="Telefon" min-width="20%"></el-table-column>
        <el-table-column prop="time" label="Erstellungszeit" min-width="25%" :formatter="formatter"></el-table-column>
      </el-Tabelle>
    </div>

    <!-- Seitenbereich -->
    <div Klasse="SeitenBox">
      <el-pagination
        Hintergrund
        Auf einer einzelnen Seite ausblenden
        Layout = "Gesamt, Größen, Zurück, Pager, Weiter"
        :page-size="Seitengröße"
        :current-page="Seite"
        :gesamt="gesamt"
        @size-change="Größenänderung"
        @current-change="vorherigesNächstes"
        @prev-click="vorherigesNächstes"
        @next-click="vorherigesNächstes"
      ></el-pagination>
    </div>
  </div>

    // Daten exportieren submit() {
      wenn (diese.Auswahlliste.Länge <= 0) {
        diese.$nachricht({
          Nachricht: "Mein Lieber, bitte wähle zuerst die Daten aus, die du exportieren möchtest!",
          Typ: "Warnung",
          showClose: wahr
        });
        zurückkehren;
      }

      dies.deaktiviert = wahr;
      let loadingInstance = Wird geladen.service({
        Text: „Meine Liebe, bitte warte einen Moment. Ich arbeite sehr hart daran, damit fertig zu werden …“,
        Hintergrund: "rgba(0,0,0,.5)"
      });

      lass arr = diese.Auswahlliste.map(item => {
        zurückkehren {
          Kennzeichnung: item.id,
          Name: Artikelname,
          Telefon: item.phone
        };
      });
      // JSON-Daten in Tabellendaten konvertieren let sheet = xslx.utils.json_to_sheet(arr),
      // Neue Tabelle erstellen book = xslx.utils.book_new();
      //Fügt ein Blatt in die Tabelle ein
      xslx.utils.book_append_sheet(Buch, Blatt, "Blatt1");
      // Schreiben Sie die Datei mit der Methode writeFile von xlsx xslx.writeFile(book, `user${new Date().getTime()}.xls`);

      wird geladenInstance.schließen();
      dies.deaktiviert = falsch;
    }