天天看點

vuecli3下載下傳excel_vue-cli3實作将資料導出為Excel表

第一步,安裝依賴

npm i -S file-saver xlsx

npm i -S script-loader

第二步,下載下傳所需要的兩個js檔案Blob.js和Export2Excel.js

第三步,在vue項目中建立檔案夾為vendor,并将兩個檔案放在一起

注:放置檔案可根據自己喜好來,但注意路徑,其中Export2Excel.js中需要導入Blob檔案,若與本文不同請記得修改路徑

圖為Export2Excel.js

第四步:在vue檔案内使用,添加兩個方法

直接上代碼:

導出資料

data () {

return {

tableData:[

{ row1:'123', row2:'111', row2:'112', },

{ row1:'123', row2:'111', row2:'112', },

{ row1:'123', row2:'111', row2:'112', },

{ row1:'123', row2:'111', row2:'112', },

{ row1:'123', row2:'111', row2:'112', },

]

};

},

methods: {

exportData(){

const { export_json_to_excel } = require('@/vendor/Export2Excel');

const tHeader = ['列1', '列2', '列3'];

const filterVal = ['phone','wechatNum','status'];

const list = this.tableData;

const data = this.formatJson(filterVal, list);

export_json_to_excel(tHeader, data, 'fileName');

},

formatJson(filterVal, jsonData) {

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

}

},