vue项目导出table数据为excel

import FileSaver from 'file-saver'
import XLSX from 'xlsx'
<el-button type="warning" @click="exportForm" icon="el-icon-download" >导出</el-button>
<el-table :data="listArr" border style="width: 99%" id="mainFrame" >
        <el-table-column prop="userName" label="姓名" align="center"></el-table-column>
        <el-table-column prop="logMonth" label="日期" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.logMonth | logMonth}}</span>
          </template>
        </el-table-column>
        
      </el-table>
methods方法:
exportForm() {
      var wb = XLSX.utils.table_to_book(document.querySelector('#mainFrame')) //  mainFrame  table的id
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '统计报表.xlsx')
      } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
      return wbout
    },

 

posted @ 2021-09-29 10:45  我是木木呀  阅读(500)  评论(0编辑  收藏  举报