vue+elementui前端表格的导出

1. 方法一
   缺点：会默认把表格每栏的数据都导出，不够灵活
   参考链接：https://www.cnblogs.com/charles8866/p/11303397.html
   核心代码：

安装依赖：npm install --save xlsx file-saver

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

exportExcel () {
      /* generate workbook object from table */
      var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
      var wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), xlsxParam)

      /* 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' }), 'fileName.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      return wbout
}

2. 方法二
   参考链接：https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/excel.html#excel-%E5%AF%BC%E5%87%BA
   封装函数：
   传入三个参数：tableData为后端请求回来的数据（数组），theaderData为表头的名称，filterValData为与表头对应的tableData里的英文字段名
   ```javascript
   //表格导出
   export function exportExcel (tableData, tHeaderData, filterValData) {
   import(‘@/vendor/Export2Excel’).then(excel => {
   const tHeader = tHeaderData
   const filterVal = filterValData
   if(tableData.length>0) {
   const list = tableData.map((item,index) =>{

   return Object.assign(item,{index:index+1})

   })
   const data = formatJson(filterVal, list)
   excel.export_json_to_excel({

   header: tHeader, //表头 必填
   data, //具体数据 必填
   filename: 'excel-list', //非必填
   autoWidth: true, //非必填
   bookType: 'xlsx' //非必填

   })
   }
   })
   }

export function formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}

页面调用：
this.formInline.size = 10000; 先把tableData数据全部取出
再恢复this.formInline.size = 10;

```javascript
    // 表格导出
    exportExcel() {  
      this.btnLoading = true;
      this.formInline.page = 0;  
      this.formInline.size = 10000;  
      setTimeout(()=>{
          //this.getInquiryPage(()=>{...})使用作用：先执行完getInquiryPage的调用，再执行{}里的...
        this.getInquiryPage(()=>{
          const tHeader = ['序号', '订单编号', '支付时间','支付方式', '问诊类型','接待医生', '问诊状态', '支付金额', '实际支付金额']
          const filterVal = ['index', 'orderNumber', 'payTime','payWay', 'type', 'doctorName', 'status', 'orderPrice','payPrice']
          if(this.tableData.length>0) {
            exportExcel(this.tableData, tHeader, filterVal)
          } else {
            this.$message({
              message: '导出数据不能为空',
              type: 'warning'
            });
          }
          this.btnLoading = false;
          this.formInline.size = 10;
          this.getInquiryPage(()=>{})
        })
      },1000)
    },

以上就是前段的表格导出的内容！