vue+elementui 中el-table导出为Excel并封装组件

安装依赖：

//xlsx 与 file-saver依赖
npm install --save xlsx file-saver

封装组件（Excel.vue）直接上代码：

<template>
  <div>
    <el-button type="primary" style="background-color: #0086b3" @click="exportExcel">{
     {
     btn}}</el-button>
  </div>
</template>
<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
     
  name: "excel",
  props: {
     
    btn: {
     
      type: String,
      default: "导出excel表格",
    },
    //导出的文件名
    excel: {
     
      type: String,
      default: "excel文件",
    },
  },
  data() {
     
    return {
     };
  },
  methods: {
     
    exportExcel() {
     
      /* generate workbook object from table */
      //表名===》 element ui 里面的表头el-table 的class名（excel）
      var wb = XLSX.utils.table_to_book(document.querySelector(".excel"));
      /* 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" }),
          `${
       this.excel}.xlsx`
        );
      } catch (e) {
     
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
  },
};
</script>

调用组件

  //利用父子组件传btn名
  <Excel :btn="excel.btn" :excel="excel.name"></Excel>

<script>
import Excel from "@/components/Excel";
export default {
     
  components: {
     
    Excel,
  },
  data() {
     
    return {
     
      excel: {
     
        btn: "导出excel表格",
        name: "excel",
      },
    };
  },
};
</script>