1.安裝依賴
npm install -S file-saver xlsx
npm install -D script-loader
cnpm i moment --save
2.下載Bolb.js與Export2Excel.js 下載鏈接https://pan.baidu.com/s/1S6sIVXjbHNxy-Gol5xnShA 提取碼：ulro
3.在src下創(chuàng)建文件夾excel栅受，將下載的Bolb.js和Export2Excel.js放在此處捞挥，修改Export2Excel.js如圖
![]()
2.png
2.png
4.在main.js中導(dǎo)入Bolb和Export2Excel和掛載moment
import Blob from './excel/Blob'
import Export2Excel from './excel/Export2Excel.js'
import moment from 'moment'//導(dǎo)入文件
Vue.prototype.$moment = moment;//賦值使用
5.在組件中的data中定義tableData存放數(shù)據(jù)
tableData:[
{id:1,name:'小明',age:18},
{id:2,name:'小紅',age:10},
{id:3,name:'曉東',age:33}
]
6.在組件的methods中放如下方法
exportExcel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../../excel/Export2Excel');
const tHeader = ['ID', '名稱', '年齡'];
// 上面設(shè)置Excel的表格第一行的標(biāo)題
const filterVal = ['id', 'name', 'age'];
const list = this.tableData; //把data里的tableData存到list
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, ''+this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss') +'');
})
},
//凡是用的prototype 使用都要this.繼承
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
7.導(dǎo)出結(jié)果如下圖
![]()
3.png
3.png
