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>