elementui excel导出指定数据

1. 安装依赖 npm install -S file-saver   npm install -S xlsx npm install -D script-loader

2. github下载Blob.js，Export2Excel.js 两个文件。

3. src目录下新建 vendor 文件夹，文件下面添加 Blob.js，Export2Excel.js 两个文件。

4. 打开 Export2Excel.js 文件，修改第二行代码，改成 require('script-loader!@/vendor/Blob');

5. 打开build目录下 webpack.base.conf.js 文件，修改 resolve -> alias;

 

 

 6. vue 文件修改导入Export2Excel.js 文件路径;

 

 

 7. 定义elementui代码, tableData可以是自己定义的数据，也可以是后端返回的数据。

8. 定义vue代码，这里的'data','name'就是取上面的prop="date",prop="name"。

 9. 如果要修改下载的字段，比如后端返回Boolean要转换成是/否，下图看列子。

10. 下面是完整的 vue文件代码；

<template>
  <!-- 表格导入导出 -->
  <div>     
    <el-card>
      <el-button @click="handleBtn">导出文件</el-button>      
        <template>
          <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-column prop="num" label="操作"> </el-table-column>
          </el-table>
        </template>
      </el-card>
  </div>
</template>
<script>
  export default {   
  data () {     
    return {      
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        num: true
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        num: false
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        num: true
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        num: true
      }]
　　}   
　},
  methods: {
　　handleBtn () {
      require.ensure( [], () => {
        const { export_json_to_excel } = require('@/vendor/Export2Excel');
        // 这里深拷贝，修改值时不会影响到原对象
        const list = JSON.parse(JSON.stringify(this.tableData));
        list.map( (item) => { // 这里修改要下载的字段内容
          item.num ? item.num = '是' : item.num = '否' 
          return item;
        });
        const filterVal = ['date', 'name', 'num'];// 取出要下载的表头字段
        const tHeader = ['日期','姓名', '状态'];// 把表头字段定义成想要的中文或英文
        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>
<style scoped lang='less'>
</style>