Vue+element 实现文件导出xlsx格式

傻瓜教程：

  第一步：安装两个依赖包

      npm install --save xlsx file-saver

  第二步：建立一个Vue文件，导入以下代码即可

<template>
  <div>
      <el-table :data="tableData" style=" 100%" id="aa">
      <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>
    <el-button @click="exportExcel">导出</el-button>
  </div>
</template>

<script>
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
  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: {
          exportExcel () {
            alert("fdajsfguia")
              /* generate workbook object from table */
              var wb = XLSX.utils.table_to_book(document.querySelector('#aa'))
              /* get binary string as output */
              var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
              try {
                FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'love you.xlsx')
              } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
              return wbout
              }
        }
}
</script>

第三步：更改自己的XLSX.uitls.table_to_book( 放入的是table 的DOM 节点 ) ，也就是在你的table标签处添加一个ID选择器，love you.xlsx即为导出表格的名字，可修改！

第四步：如有不懂可以讨论：qq 1059332883