纯前端导出

第一步：（安装file-saver依赖&&xlsx依赖）
npm install file-saver --save
npm install xlsx

第二步：（新建一个export.js文件，引入file-saver && xlsx）
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
/**
 * 前端表格导出
 * @param  {String} name 文件名称
 * @param  {String} tableId tableId
 */
export function forntExport(name, tableId) {
  var wb = XLSX.utils.table_to_book(document.querySelector(tableId), {
    raw: true
  })
  var wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  })
  try {
    FileSaver.saveAs(
      new Blob([wbout], {type: 'application/octet-stream'}),
      name
    )
  } catch (e) {
    console.log(e, wbout)
  }
  return wbout
}

第三步：(在vue组件中引入forntExport方法)
<template>
  <div>
    <el-button type="primary" @click="onExportClick">导出</el-button>
    <el-table id="table" :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import {forntExport} from '@/utils/url.js'
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },
  methods: {
    // 导出
    onExportClick() {
      forntExport('测试.xlsx', '#table')
      return this.$message.success('导出成功')
    }
  }
}
</script>

<style lang="scss" scoped></style>