VUE element-ui 之table表格导出Excel功能

短命女 2022-11-17 03:39 337阅读 0赞

**步骤一：**  
安装依赖

npm install --save xlsx file-saver

引入依赖

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

**步骤二：**  
定义表格id

<div class="dealed-details" style="height: 50px;">
            <span>未交易销售人员数据详情</span>
            <el-button round class="exportExcel1" @click="getExcData(excelName.dow.id,excelName.dow.name)">导出Excel</el-button>
          </div>
          <el-table
            id="out-table1"
            v-loading="loading"
            :data="tableData2"
            border
            height="352"
            class="dv_table"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
          >
    
    
    data() { 
    	return { 
    		excelName: { 
            top: { 
              id: 'out-table',
              name: '未达成交易销售人员数据详情'
            },
            dow:  { 
              id: 'out-table1',
              name: '未达成交易销售人员数据详情'
            }
          }
    	}
    }

**步骤三：**  
js部分

// 导出Excel
        getExcData(id, name) {  // 获取id及name
          this.exportExcel(id, name)
        },
        exportExcel(id, name) { 
          var xlsxParam = {  raw: true } // 只导出不解析
          var wb = XLSX.utils.table_to_book(document.querySelector('#' + id), xlsxParam)
           wb.Sheets.Sheet1['A1'].v = '年份' // 固定表头A1,B1,C1......
          var wbout = XLSX.write(wb, { 
            bookType: 'xlsx',
            bookSST: true,
            type: 'array'
          })
          try { 
            FileSaver.saveAs(
              new Blob([wbout], {  type: 'application/octet-stream' }),
              `${ name}` + '.xlsx'
            )
          } catch (e) { 
            if (typeof console !== 'undefined') console.log(e, wbout)
          }
          return wbout
        }
        *这里我的页面有两个表格所以id不同*

**希望能帮到您，如有不足请烦请指点，共勉之。**