vue 导出eltable内容

如果el-table表格有跨行或跨列的，同样也支持

1.安装依赖：npm install --save xlsx file-saver
2.在放置需要导出功能的组件中引入
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'

3.封装一个简单的导出组件
在src下components中创建ExportExcel.vue
将下面代码复制粘贴
<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="orderData" id="exportTab" :span-method="spanMethod" border>
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="100"></el-table-column>
      <el-table-column prop="amount1" label="数值 1 (元)"></el-table-column>
      <el-table-column prop="amount2" label="数值 2 (元)"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getSpanMethod } from "@/utils/el-table-span-method";
import ExportExcel from "@/components/ExportExcel.vue";

export default {
  components: {
    ExportExcel,
  },
  data() {
    return {
      orderData: [
        {
          id: "1",
          name: "王小虎",
          amount1: "234",
          amount2: "165",
        },
        {
          id: "1",
          name: "王小虎",
          amount1: "165",
          amount2: "165",
        },
        {
          id: "2",
          name: "王小虎",
          amount1: "324",
          amount2: "165",
        },
        {
          id: "2",
          name: "王小虎",
          amount1: "621",
          amount2: "165",
        },
        {
          id: "2",
          name: "王小虎",
          amount1: "539",
          amount2: "165",
        },
        {
          id: "3",
          name: "王小虎",
          amount1: "621",
          amount2: "165",
        },
        {
          id: "3",
          name: "王小虎",
          amount1: "539",
          amount2: "165",
        },
      ],
    };
  },
  computed: {
    spanMethod: {
      get() {
        return (this.spanMethod = getSpanMethod(
          this.orderData,
          ["id"],
          ["name", "amount2"]
        ));
      },
      set(val) {
        return val;
      },
    },
  },
};
</script>