vue+elementUI el-table导出excel表格
- 安装依赖库:
npm install -D xlsx ,file-saver
npm install -s script-loader
- 在项目的src文件夹下新建一个文件夹vendor:(vendor—名字任取),里面放置两个文件Blob.js和 Export2Excel.js。这两个文件去这里下载:点我下载
- 在当前.vue文件中引入相关依赖:
require('script-loader!file-saver'); //保存文件用
require('script-loader!vendor/Blob'); //转二进制用
require('script-loader!xlsx/dist/xlsx.core.min'); //xlsx核心
- 更改webpack.base.conf.js配置
在resolve的alias中添加一段话: 'vendor': path.resolve(__dirname, '../src/vendor'),
5. 在.vue文件中,methods中添加如下两个方法:
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../vendor/Export2Excel');
const tHeader = ['序号','县(村)编号IDA', '县(村)名称']; // 对应表格输出的title
const filterVal = ['', 'ida', 'cname']; // 对应表格输出的数据
const list = this.dataList;
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]))
}
6. 新建button。触发export2Excel事件即可。
<el-button @click="export2Excel" type="success">导出</el-button>