Elementui exportiert Daten in XLSX- und Excel-Tabellen

npm installiere Dateisparer
npm installiere xlsx

//Excel-Tabellenvorlage in Vue exportieren, FileSaver aus „file-saver“ importieren
XLSX aus „xlsx“ importieren
 
Vue.prototype.$FileSaver = FileSaver; //Global festlegen Vue.prototype.$XLSX = XLSX; //Global festlegen

<Vorlage>
  <div Klasse="daochu">
      <el-button @click="o" type="success" round>Exportieren</el-button>
      <el-Tabelle
    id="du"
    :data="Tabellendaten"
    Stil="Breite: 100%"
    :default-sort="{ prop: 'Datum', Reihenfolge: 'absteigend' }"
     >
    <el-table-column prop="date" label="Datum" sortierbar width="180">
    </el-Tabellenspalte>
    <el-table-column prop="name" label="Name" sortierbar width="180">
    </el-Tabellenspalte>
    <el-table-column prop="address" label="Adresse" :formatter="Formatierer">
    </el-Tabellenspalte>
  </el-Tabelle>
 
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      Tabellendaten: [
        {
          Datum: "2016-05-02",
          Name: "Wang Xiaohu",
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“,
        },
        {
          Datum: "04.05.2016",
          Name: "Wang Xiaohu",
          Adresse: „Nr. 1517, Jinshajiang Road, Bezirk Putuo, Shanghai“,
        }
      ],
    };
  },
  Methoden:{
    o() {
      let tables = document.getElementById("ou");
      Lassen Sie table_book = this.$XLSX.utils.table_to_book(tables);
      var table_write = this.$XLSX.write(table_book, {
        Buchtyp: "xlsx",
        bookSST: wahr,
        Typ: "Array",
      });
      versuchen {
        dies.$FileSaver.saveAs(
          neuer Blob([table_write], { Typ: "Anwendung/Oktett-Stream" }),
          "sheetjs.xlsx"
        );
      } fangen (e) {
        wenn (Typ der Konsole !== "undefiniert") console.log(e, table_write);
      }
      gibt table_write zurück;
    },
  }
}
</Skript>