在vue中将el-table导出excel表格

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

<template>
    <el-button type="primary"  :loading="downloadLoading" icon="el-icon-top-right" size="small" @click="exportExcel">导出</el-button>
</template>

<script>
import FileSaver from ‘file-saver‘
import XLSX from ‘xlsx‘
export default {
  props: {
    id: {
      type: String,  //table ID名称
      default: ‘table‘
    },
    name: {
      type: String, //导出需要的名字
      default: ‘Table‘
    }

  },
  data () {
    return {
      downloadLoading:false
    }
  },
  components: {},
  methods: {
    // 导出Excel表格
    exportExcel () {
      this.downloadLoading = true
      var xlsxParam = { raw: true } //转换成excel时，使用原始的格式
      /* 从表生成工作簿对象 */
      var wb = XLSX.utils.table_to_book(
        document.querySelector(‘#‘ + this.id),
        xlsxParam
      )
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: ‘xlsx‘,
        bookSST: true,
        type: ‘array‘
      })
      try {
        FileSaver.saveAs(
          //Blob 对象表示一个不可变、原始数据的类文件对象。
          //Blob 表示的不一定是JavaScript原生格式的数据。
          //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          new Blob([wbout], {
            type: ‘application/octet-stream‘
          }),
          //设置导出文件名称
          this.name + ‘.xlsx‘
        )
      } catch (e) {
        if (typeof console !== ‘undefined‘) console.log(e, wbout)
      }
      this.downloadLoading = false
      return wbout
    }
  }
}
</script>

<template>
  <div>
    <!-- id绑定的是el-table的id名称 -->
    <!-- name是导出excel的表格名称 -->
    <exportExcel :id="‘exportTab‘" :name="‘导出Table‘"></exportExcel>
    <el-table :data="tableData" id="exportTab" 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="地址" width="250"> </el-table-column>
    </el-table>
  </div>
</template>
import ExportExcel from "@/components/ExportExcel.vue";
export default {
  components: {
    ExportExcel
  },
  props: {},
  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 弄",
        },
      ],
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
   
  },
};