element ui 导出表格

一、 安装到处Excel所需要的依赖包

npm install xlsx@^0.16.0 --save

npm install file-saver@^2.0.2 --save

二、在引用的页面中导入

import FileSaver from "file-saver";
import XLSX from "xlsx";

三、给elementuide table组件添加id

  <el-table 
        :data="tableDate" 
        id="out-table" 
        style="width:100%;"
    >
       <el-table-column 
          label="序号"
           prop="cardId"
          >
       </el-table-column>
   </el-table>

四、点击导出按钮

<el-button @click="exportExcel" type="primary" size="medium">导出</el-button>

 exportExcel () {
      var xlsxParam = { raw: true }
      var wb = XLSX.utils.table_to_book(
        document.querySelector('#table-out'),
        xlsxParam
      )
      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
    },