最近遇到需要将table数据导出为excel文件的需求,查到了一些资源,记录下来
1.首先需要安装三个依赖
npm install -S file-saver xlsx
npm install -D script-loader
2.然后新建一个文件夹,名字可以自定义,我这边叫vendor,里面存放两个我们需要用到的js文件,Blob.js和 Export2Excel.js
js下载地址
3.我们在页面添加一个导出按钮,在methods中添加导出方法
<template>
<div>
<el-button type="primary" @click="exportTable()">导出Excel</el-button>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
exportTable(){//导出excel
require.ensure([], () => {
const { export_json_to_excel } = require('../../vendor/Export2Excel');//引入js文件
const tHeader = ['日期', '姓名', '地址'];//table的表头数据,导出后为excel第一行
const filterVal = ['date', 'name', 'address'];//table数据的prop关键字,后面循环要用到
const list = this.tableData;//this.tableData是我的初始填入数据,这里以element-ui的表格为例
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]))
},
}
}
</script>
页面效果如下:
导出的excel:
4.如果webpack报解析错误:
在build----webpack.base.conf.js中resolve的alias加入
‘vendor’: path.resolve(__dirname, ‘…/src/vendor’),
即可解决,alias是配置别名
如果对你有帮助,请留下你的赞,感谢