vue+elementUI el-table导出excel表格

vue+elementUI el-table导出excel表格

1. 安装依赖库：

npm install -D xlsx ,file-saver
npm install -s script-loader

2. 在项目的src文件夹下新建一个文件夹vendor：（vendor—名字任取），里面放置两个文件Blob.js和 Export2Excel.js。这两个文件去这里下载：点我下载

3. 在当前.vue文件中引入相关依赖：

require('script-loader!file-saver'); //保存文件用
require('script-loader!vendor/Blob'); //转二进制用
require('script-loader!xlsx/dist/xlsx.core.min'); //xlsx核心

4. 更改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>