Vue+element 實現文件導出xlsx格式

傻瓜教程：

  第一步：安裝兩個依賴包

      npm install --save xlsx file-saver

  第二步：建立一個Vue文件，導入以下代碼即可

<template>
  <div>
      <el-table :data="tableData" style="width: 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