vue+elementui实现表格导出为excel文件

在我们的后端项目中将表格导出为excel文件是在正常不过的了

1. 不要用最新的 npm install xlsx --save 依赖
2. 使用稳定版本的 npm install xlsx@0.16.2 --save

不用稳定版本的会出现各种灵异事件报错

安装以后就可以直接导入使用了，下面是一个使用例子

<template>
  <div>
    <el-button type="primary" @click="exportExcel">导出 Excel</el-button>
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="date" label="日期" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="address" label="地址" />
    </el-table>
  </div>
</template>

<script>
import XLSX from 'xlsx'
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    exportExcel() {
      console.log('年hi')
      const wb = XLSX.utils.book_new()
      const ws = XLSX.utils.json_to_sheet(this.tableData)
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
      XLSX.writeFile(wb, 'data.xlsx')
    }
  }
}
</script>

  <style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  </style>