1.安装依赖
npm install -S file-saver xlsx
npm install -D script-loader
cnpm i moment --save
3.在src下创建文件夹excel,将下载的Bolb.js和Export2Excel.js放在此处,修改Export2Excel.js如图
2.png
4.在main.js中导入Bolb和Export2Excel和挂载moment
import Blob from './excel/Blob'
import Export2Excel from './excel/Export2Excel.js'
import moment from 'moment'//导入文件
Vue.prototype.$moment = moment;//赋值使用
5.在组件中的data中定义tableData存放数据
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', '名称', '年龄'];
// 上面设置Excel的表格第一行的标题
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.导出结果如下图
3.png
网友评论