Wie exportiere ich eine Excel-Datei in Vue?

Ich bin heute während der Entwicklung auf etwas gestoßen, nämlich wie man Excel-Dateien mit vorhandenen Daten exportiert. Es gibt viele Methoden im Internet, und einige sprechen über die Verwendung des Datenflusses, https://www.cnblogs.com/yeqrblog/. p /9758981.html, aber jetzt ist meine Idee, einfach Array-Daten ohne Datenfluss zu verwenden, und es stellt sich heraus, dass es möglich ist:

//npm 
npm install -S file-saver xlsx
npm install -D script-loader

2. In main.js Import Bolb .js und Export2Excel.js

Zwei js-Dateiadressen:

Link: https://pan.baidu.com/s/1ib2Ox18FngVlhKxs6l8OZQ

Extraktionscode: sirm

import Blob from './excel/Blob'
import Export2Excel from './excel/Export2Excel.js'

3

//导出的方法
exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('../excel/Export2Excel');
        const tHeader = ['序号', '昵称', '姓名'];
        // 上面设置Excel的表格第一行的标题
        const filterVal = ['index', 'nickName', 'name'];
        // 上面的index、nickName、name是tableData里对象的属性
        const list = this.tableData;  //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '列表excel');
      })
    },

    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))

t in der Komponente ist der Tabellenkopf, die Daten in filterVal sind das Feld der Tabelle, tableData speichert die Daten in der Tabelle, der Typ ist ein Array und Objekte werden darin gespeichert Objekt.

Das ist es. 🔜 Besuchen Sie:

Programmierunterricht

! !

Das obige ist der detaillierte Inhalt vonWie exportiere ich eine Excel-Datei in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!