Implementierung des Imports und Exports von Vue-Element-Admin-Projekten

npm und xlsx

Importieren Sie CommonTools aus „./CommonTools“.
UploadExcel aus „./UploadExcel“ importieren
Standard exportieren {
  installieren(Vue) {
    Vue.component('CommonTools', CommonTools) // Symbolleistenkomponente registrieren Vue.component('UploadExcel', UploadExcel) // Importierte Excel-Komponente registrieren }
}

<Vorlage>
  <div Klasse="Upload-Excel">
    <div Klasse="btn-upload">
      <el-button :loading="wird geladen" size="mini" type="primary" @click="handleUpload">
        Zum Hochladen klicken</el-button>
    </div>

    <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
    <div Klasse="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
      <i Klasse="el-icon-upload" />
      <span>Dateien hierher ziehen</span>
    </div>
  </div>
</Vorlage>

<Skript>
XLSX aus „xlsx“ importieren

Standard exportieren {
  Requisiten: {
    beforeUpload: Funktion, // eslint-disable-line
    onSuccess: Funktion // eslint-disable-line
  },
  Daten() {
    zurückkehren {
      wird geladen: falsch,
      excelDaten: {
        Header: null,
        Ergebnisse: null
      }
    }
  },
  Methoden: {
    generateData({ header, results }) {
      this.excelData.header = Kopfzeile
      this.excelData.results = Ergebnisse
      dies.beiErfolg und dies.beiErfolg(diese.excelData)
    },
    handleDrop(e) {
      e.stopPropagation()
      e.preventDefault()
      wenn (dieses.laden) return
      const-Dateien = e.dataTransfer.files
      if (Dateien.Länge !== 1) {
        this.$message.error('Unterstützt nur das Hochladen einer Datei!')
        zurückkehren
      }
      const rawFile = files[0] // nur files[0] verwenden

      wenn (!dies.istExcel(rawFile)) {
        this.$message.error('Unterstützt nur das Hochladen von Dateien mit den Suffixen .xlsx, .xls und .csv')
        return false
      }
      dies.upload(Rohdatei)
      e.stopPropagation()
      e.preventDefault()
    },
    handleDragover(e) {
      e.stopPropagation()
      e.preventDefault()
      e.dataTransfer.dropEffect = "Kopieren"
    },
    Hochladen mit Handle() {
      dies.$refs['excel-upload-input'].click()
    },
    handleKlick(e) {
      const-Dateien = e.target.files
      const rawFile = files[0] // nur files[0] verwenden
      wenn (! Rohdatei) return
      dies.upload(Rohdatei)
    },
    hochladen(Rohdatei) {
      this.$refs['excel-upload-input'].value = null // Fix: kann nicht das gleiche Excel auswählen

      wenn (!this.beforeUpload) {
        dies.readerData(Rohdatei)
        zurückkehren
      }
      const vorher = this.beforeUpload(rawFile)
      wenn (vor) {
        dies.readerData(Rohdatei)
      }
    },
    Leserdaten(Rohdatei) {
      dies.laden = wahr
      returniere neues Promise((lösen, ablehnen) => {
        const reader = neuer FileReader()
        reader.onload = e => {
          const data = e.ziel.ergebnis
          const workbook = XLSX.read(Daten, { Typ: 'Array' })
          const firstSheetName = workbook.SheetNames[0]
          const worksheet = workbook.Sheets[ersterSheetName]
          const header = this.getHeaderRow(Arbeitsblatt)
          const Ergebnisse = XLSX.utils.sheet_to_json(Arbeitsblatt)
          this.generateData({ Header, Ergebnisse })
          dies.laden = falsch
          lösen()
        }
        Leser.readAsArrayBuffer(Rohdatei)
      })
    },
    getHeaderRow(Tabellenblatt) {
      const-Header = []
      Konstanter Bereich = XLSX.utils.decode_range(Blatt['!ref'])
      sei C
      const R = Bereich.sr
      /* in der ersten Zeile beginnen */
      for (C = range.sc; C <= range.ec; ++C) { /* durchsuche jede Spalte im Bereich */
        const Zelle = Blatt[XLSX.utils.encode_cell({ c: C, r: R })]
        /* finde die Zelle in der ersten Zeile */
        let hdr = 'UNKNOWN ' + C // <-- ersetzen Sie durch den gewünschten Standard
        wenn (Zelle && Zelle.t) hdr = XLSX.utils.format_cell(Zelle)
        Header.push(hdr)
      }
      Rückgabeheader
    },
    isExcel(Datei) {
      return /\.(xlsx|xls|csv)$/.test(Dateiname)
    }
  }
}
</Skript>

<style scoped lang="scss">
.upload-excel {
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
   Rand oben: 100px;
   .excel-upload-eingabe{
       Anzeige: keine;
        Z-Index: -9999;
     }
   .btn-upload , .drop{
      Rand: 1px gestrichelt #bbb;
      Breite: 350px;
      Höhe: 160px;
      Textausrichtung: zentriert;
      Zeilenhöhe: 160px;
   }
   .fallen{
       Zeilenhöhe: 80px;
       Farbe: #bbb;
      ich {
        Schriftgröße: 60px;
        Anzeige: Block;
      }
   }
}
</Stil>

    Pfad: '/import',
    Komponente: Layout,
    hidden: true, // versteckt im linken Menü children: [{
      Pfad: '', // Kein sekundärer Routingpfad bedeutet sekundäres Standardrouting Komponente: () => import('@/views/import')
    }]
  },

<Vorlage>
  <!-- Öffentliche Importkomponenten --> 
  <upload-excel :on-success="Erfolg" />
</Vorlage>

Exportfunktion importUser(Daten) {
  Rückgabeanforderung({
    URL: „Benutzer/Stapel“,
    Methode: 'post',
    Daten
  })
}

 asynchroner Erfolg({ Header, Ergebnisse }) {
      // Wenn Sie Benutzer importieren const userRelations = {
          'Jobdatum': 'Erstellungszeit',
          'Mobilnummer': 'Mobiltelefon',
          'Benutzername': 'Benutzername',
          'Passwort': 'Passwort',
          'E-Mail': 'E-Mail',
          'Abteilung': 'Abteilung'
        }
        const arr = []
       Ergebnisse.fürJedes(Element => {
          const BenutzerInfo = {}
          Objekt.Schlüssel(Element).fürJeden(Schlüssel => {
            Benutzerinfo [Benutzerbeziehungen [Schlüssel]] = Element [Schlüssel]
          })
         arr.push(Benutzerinfo) 
        })
        warte auf importUser(arr) //Rufen Sie die Importschnittstelle this.$router.back() auf
    }

 Daten() {
    zurückkehren {
      Typ: this.$route.query.type
    }
  },

formatDate(Nummer, Format) {
      const Zeit = neues Datum((Zahl - 1) * 24 * 3600000 + 1)
      Zeit.setYear(Zeit.getFullYear() - 70)
      const jahr = zeit.getFullYear() + ''
      const Monat = Zeit.getMonth() + 1 + ''
      const date = time.getDate() - 1 + ''
      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
    }

 asynchroner Erfolg({ Header, Ergebnisse }) {
      wenn (dieser.Typ === 'Benutzer') {
        const BenutzerRelations = {
          'Jobdatum': 'Erstellungszeit',
          'Mobilnummer': 'Mobiltelefon',
          'Benutzername': 'Benutzername',
          'Passwort': 'Passwort',
          'E-Mail': 'E-Mail',
          'Abteilung': 'Abteilung'
        }
        const arr = []
        // Alle Arrays durchlaufen results.forEach(item => {
        // Sie müssen das Chinesische in jedem Datenelement in Englisch ändern const userInfo = {}
          Objekt.Schlüssel(Element).fürJeden(Schlüssel => {
          // Schlüssel ist der aktuelle chinesische Name, um den entsprechenden englischen Namen zu finden, wenn (userRelations[key] === 'timeOfEntry' || userRelations[key] === 'correctionTime') {
              userInfo[userRelations[key]] = new Date(this.formatDate(item[key], '/')) // Nur so kann es in der Datenbank gespeichert werden return
            }
            Benutzerinfo [Benutzerbeziehungen [Schlüssel]] = Element [Schlüssel]
          })
          // Schließlich wird userInfo vollständig auf Englisch arr.push(userInfo)
        })
        warte auf importUser(arr)
        this.$message.success('Import erfolgreich')
      }
      this.$router.back() // Zurück zur vorherigen Seite},
    formatDate(Nummer, Format) {
      const Zeit = neues Datum((Zahl - 1) * 24 * 3600000 + 1)
      Zeit.setYear(Zeit.getFullYear() - 70)
      const jahr = zeit.getFullYear() + ''
      const Monat = Zeit.getMonth() + 1 + ''
      const date = time.getDate() - 1 + ''
      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
    }

<el-button type="warning" size="small" @click="$router.push('/import?type=user')">Importieren</el-button>

npm installiere xlsx Dateisparer -S
npm installiere Skript-Loader -S -D

import('@/vendor/Export2Excel').then(excel => {
  excel.export_json_to_excel({
    header: tHeader, //Erforderlich für Tabellenkopfdaten, //Erforderlich für bestimmten Datendateinamen: ‚excel-list‘, //Optional autoWidth: true, //Optional bookType: ‚xlsx‘ //Optional})
})

/* eslint-deaktivieren */
importiere { saveAs } von 'file-saver'
XLSX aus „xlsx“ importieren

Funktion generateArray(table) {
  var out = [];
  var Zeilen = Tabelle.querySelectorAll('tr');
  var Bereiche = [];
  für (var R = 0; R < Zeilen.Länge; ++R) {
    var outRow = [];
    var Zeile = Zeilen[R];
    var Spalten = Zeile.querySelectorAll('td');
    für (var C = 0; C < Spalten.Länge; ++C) {
      var Zelle = Spalten[C];
      var colspan = cell.getAttribute('colspan');
      var rowspan = cell.getAttribute('rowspan');
      var Zellwert = Zelle.innerText;
      wenn (Zellenwert !== "" und Zellenwert == +Zellenwert) Zellenwert = +Zellenwert;

      //Bereiche überspringen
      Bereiche.fürJeden(Funktion (Bereich) {
        wenn (R >= Bereich.sr && R <= Bereich.er && outRow.length >= Bereich.sc && outRow.length <= Bereich.ec) {
          für (var i = 0; i <= range.ec - range.sc; ++i) outRow.push(null);
        }
      });

      //Zeilenspanne verarbeiten
      wenn (Zeilenspanne || Spaltenspanne) {
        Zeilenspanne = Zeilenspanne || 1;
        colspan = colspan || 1;
        Bereiche.push({
          S: {
            r: R,
            c: outRow.Länge
          },
          e: {
            r: R + Zeilenspanne - 1,
            c: outRow.length + colspan - 1
          }
        });
      };

      //Wert verarbeiten
      outRow.push(Zellenwert !== "" ? Zellenwert : null);

      //Colspan verarbeiten
      wenn (Colspan)
        für (var k = 0; k < colspan - 1; ++k) outRow.push(null);
    }
    out.push(outRow);
  }
  zurückgeben [out, Bereiche];
};

Funktion datum(v, date1904) {
  wenn (Datum1904) v += 1462;
  var Epoche = Datum.parse(v);
  return (Epoche – neues Datum (Datum.UTC (1899, 11, 30))) / (24 * 60 * 60 * 1000);
}

Funktion sheet_from_array_of_arrays(Daten, Optionen) {
  var ws = {};
  var Bereich = {
    S: {
      c: 10000000,
      r: 10000000
    },
    e: {
      c: 0,
      r: 0
    }
  };
  für (var R = 0; R != Datenlänge; ++R) {
    für (var C = 0; C != Daten[R].Länge; ++C) {
      wenn (Bereich.sr > R) Bereich.sr = R;
      wenn (Bereich.sc > C) Bereich.sc = C;
      wenn (Bereich.er < R) Bereich.er = R;
      wenn (Bereich.ec < C) Bereich.ec = C;
      var Zelle = {
        v: Daten[R][C]
      };
      wenn (cell.v == null) fortfahren;
      var cell_ref = XLSX.utils.encode_cell({
        c: C,
        r: R
      });

      wenn (Typ von Zelle.v === 'Zahl') Zelle.t = 'n';
      sonst wenn (Typ von Zelle.v === 'boolean') Zelle.t = 'b';
      sonst wenn (Zelle.v Instanz von Datum) {
        Zelle.t = "n";
        Zelle.z = XLSX.SSF._Tabelle[14];
        Zelle.v = Datenum(Zelle.v);
      } sonst Zelle.t = 's';

      ws[Zellenreferenz] = Zelle;
    }
  }
  wenn (range.sc < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
  Rückkehr ws;
}

Funktion Arbeitsmappe() {
  if (!(diese Instanz der Arbeitsmappe)) returniere neue Arbeitsmappe();
  dies.SheetNames = [];
  dies.Sheets = {};
}

Funktion s2ab(s) {
  var buf = neuer ArrayBuffer(s.Länge);
  var view = neues Uint8Array(buf);
  für (var i = 0; i != s.Länge; ++i) Ansicht[i] = s.charCodeAt(i) & 0xFF;
  Puffer zurückgeben;
}

Exportfunktion export_table_to_excel(id) {
  var theTable = document.getElementById(id);
  var oo = generateArray(dieTabelle);
  var Bereiche = oo[1];

  /* Originaldaten */
  var Daten = oo[0];
  var ws_name = "SheetJS";

  var wb = neue Arbeitsmappe(),
    ws = Blatt_aus_Array_von_Arrays(Daten);

  /* Bereiche zum Arbeitsblatt hinzufügen */
  // ws['!cols'] = ['Apfel', 'Banane'];
  ws['!merges'] = Bereiche;

  /* Arbeitsblatt zur Arbeitsmappe hinzufügen */
  wb.SheetNames.push(ws_name);
  wb.Sheets[ws_name] = ws;

  var wbout = XLSX.write(wb, {
    Buchtyp: "xlsx",
    bookSST: falsch,
    Typ: „binär“
  });

  speichernUnter(neuer Blob([s2ab(wbout)], {
    Typ: „Anwendung/Oktett-Stream“
  }), "test.xlsx")
}

Exportfunktion export_json_to_excel({
  multiHeader = [],
  Kopfzeile,
  Daten,
  Dateiname,
  zusammengeführt = [],
  autoWidth = true,
  Buchtyp = "xlsx"
} = {}) {
  /* Originaldaten */
  Dateiname = Dateiname || 'Excel-Liste'
  Daten = [...Daten]
  Daten.unshift(Header);

  für (let i = multiHeader.length - 1; i > -1; i--) {
    Daten.unshift(multiHeader[i])
  }

  var ws_name = "SheetJS";
  var wb = neue Arbeitsmappe(),
    ws = Blatt_aus_Array_von_Arrays(Daten);

  wenn (merges.length > 0) {
    wenn (!ws['!merges']) ws['!merges'] = [];
    merges.forEach(item => {
      ws['!merges'].push(XLSX.utils.decode_range(Element))
    })
  }

  if (autoWidth) {
    /*Legen Sie die maximale Breite jeder Arbeitsblattspalte fest*/
    const colWidth = data.map(row => row.map(val => {
      /*Bestimmen Sie zuerst, ob es null/undefiniert ist*/
      wenn (val == null) {
        zurückkehren {
          'wch': 10
        };
      }
      /*Beurteilen Sie, ob es Chinesisch ist*/
      sonst wenn (val.toString().charCodeAt(0) > 255) {
        zurückkehren {
          'wch': val.toString().Länge * 2
        };
      } anders {
        zurückkehren {
          'wch': val.toString().Länge
        };
      }
    }))
    /*Verwende die erste Zeile als Anfangswert*/
    let result = colWidth[0];
    für (lass i = 1; i < colWidth.length; i++) {
      für (sei j = 0; j < colWidth[i].length; j++) {
        wenn (Ergebnis[j]['wch'] < Spaltenbreite[i][j]['wch']) {
          Ergebnis[j]['wch'] = Spaltenbreite[i][j]['wch'];
        }
      }
    }
    ws['!cols'] = Ergebnis;
  }

  /* Arbeitsblatt zur Arbeitsmappe hinzufügen */
  wb.SheetNames.push(ws_name);
  wb.Sheets[ws_name] = ws;

  var wbout = XLSX.write(wb, {
    Buchtyp: Buchtyp,
    bookSST: falsch,
    Typ: „binär“
  });
  speichernUnter(neuer Blob([s2ab(wbout)], {
    Typ: „Anwendung/Oktett-Stream“
  }), `${filename}.${bookType}`);
}

 const-Header = {
        'Jobdatum': 'Erstellungszeit',
        'Mobilnummer': 'Mobiltelefon',
        'Benutzername': 'Benutzername',
        'Rolle': 'Rollenname',
        'E-Mail': 'E-Mail',
        'Abteilung': 'Abteilungsname'
      }

importiere { formatDate } aus '@/filters'
// Daten exportieren exportData() {
      const-Header = {
        'Jobdatum': 'Erstellungszeit',
        'Mobilnummer': 'Mobiltelefon',
        'Benutzername': 'Benutzername',
        'Rolle': 'Rollenname',
        'E-Mail': 'E-Mail',
        'Abteilung': 'Abteilungsname'
      }
      importiere('@/vendor/Export2Excel').dann(async excel => {
        const res = warte auf getUserList({ Abfrage: '', Seitenzahl: 1, Seitengröße: diese.Seite.gesamt })
        // konsole.log(res)
        const data = this.formatJson(header, res.benutzer)
        console.log(Daten)
        excel.export_json_to_excel({
          Header: Objekt.Schlüssel(Header),
          Daten,
          Dateiname: 'Benutzerinformationstabelle',
          autoWidth: true,
          Buchtyp: "xlsx"

        })
      })
    }    
    }

   // Diese Methode ist für die Konvertierung des Arrays in ein zweidimensionales Arrayformat verantwortlichJson(headers, rows) {
      returniere Zeilen.Map(Element => {
        returniere Object.keys(headers).map(key => {
          wenn (Header[Schlüssel] === 'Erstellungszeit') {
            return formatDate(item[headers[key]]) // formatDate-Funktion ist ein definierter Filter}
          returniere Element[Header[Schlüssel]]
        })
      })

Moment aus „Moment“ importieren
Exportfunktion formatTime(Wert) {
  Rückgabezeitpunkt (Wert * 1000).Format('JJJJ-MM-TT HH:mm:ss')
}
Exportfunktion formatDate(Wert) {
  Rückgabezeitpunkt (Wert * 1000).Format ('JJJJ-MM-TT')
}