VUE将table数据导出excel

最近遇到需要将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是配置别名　
如果对你有帮助，请留下你的赞，感谢