vue+el-ui实现el-table的导出表格功能

导入

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

写表格

      <el-button @click="exportExcel()">导出</el-button>
      <el-table
              class="table"
              :data="el_table_data_list"
              style="width: 100%">   <!--注意class,利用class进表格导出的绑定-->
        <el-table-column v-for="(value,index) in el_table_prop_list" :key=index :prop=value.el_table_prop :label=value.el_table_label sortable>
        </el-table-column>
      </el-table>

JS方法

  exportExcel () {
      /* generate workbook object from table */      
      //  .table要导出的表格
      var wb = XLSX.utils.table_to_book(document.querySelector('.table'))
      /* get binary string as output */
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
      //table.xlsx默认导出文件名，在弹出文件夹框的时候可修改保存
          FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'table.xlsx')
      } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
      return wbout
    },

效果
在这里插入图片描述