第一步,安裝依賴
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]))
}
},