vue中导出excel（2）

依赖

npm install xlsx

DOM结构

// 只要是table结构就好，这里只是举个demo
<el-button @click="download">下载excel</el-button>
<el-table
    :data="result"
    style="width: 100%"
    border
    stripe
    id="table"
    ref="table"
    v-show="result.length > 0">
    <el-table-column
    v-for="item in header"
    :key="item"
    :prop="item"
    :label="item">
    </el-table-column>
</el-table>

脚本

import * as XLSX from 'xlsx'

download () {
  const workbook = XLSX.utils.book_new()
  console.log(document.getElementById('table'))
  console.log(this.$refs.table.$el)
  // this.$refs.table.$el === document.querySeletor('')
  var ws1 = XLSX.utils.table_to_sheet(this.$refs.table.$el)  // 传入元素节点
  XLSX.utils.book_append_sheet(workbook, ws1, "Sheet1")
  XLSX.writeFile(workbook, 'table.xlsx')  // 导出的文江名
}