前端表格数据导出至Excel

引入js-xlsx插件

1、script标签引入

<script lang="javascript" src="dist/xlsx.full.min.js"></script>

2、使用npm安装如下模块

npm install xlsx --save

这里以.vue文件为例

1、引入xlsx模块

import XLSX from 'xlsx'

2、表格部分（这里用的是elementUI表格组件）

<div class="top-level-element">
    <div>
      <el-button type="primary"
      @click="exportTableData"
      >
        导出报表
      </el-button>
    </div>
    <el-table
      :data="tableData"
      ref="table"
      style="width: 50%">
      <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>

3、js代码如下

<script>
  import XLSX from 'xlsx'
export default {
  name: 'home',
  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: {
    exportTableData() {
      //判断表是否有数据
      if(!this.tableData.length) this.$message.error('暂无数据导出')
      const {columns} = this.$refs.table
      let data = [], propertys = [...columns].map(item => item.property)
      data.push([...columns].map(item => item.label))
      // console.log(data) //["日期","姓名","地址"]
      // console.log(propertys) //["date", "name", "address"]

      //处理数据
      this.tableData.forEach(item1 => {
        let arr = [...propertys].map(item2 => item1[item2])
        data.push(arr)
      })
      const wb = XLSX.utils.book_new(); //创建一个新的工作簿
      const ws = XLSX.utils.aoa_to_sheet(data); //使用二维数组创建一个工作表对象
      XLSX.utils.book_append_sheet(wb, ws, "Sheet的名称"); //向工作簿中追加一个工作表
      XLSX.writeFile(wb, Date.now() + ".xlsx");
      console.log(wb)
    }
  },
}
</script>

数据处理成二维数组的数据格式，一个数组代表一行，如下图：

前端最终导出效果：