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