前端vxe-table导出xlsx excel文档和csv文档

准备工作

• npm 安装 vxe-table
• npm 安装 exceljs
• npm 安装 vxe-table-plugin-export-xlsx

• mian.js

import VXETable from 'vxe-table' 
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
VXETable.use(VXETablePluginExportXLSX)

<template>
  <div class="main-view">
    <div class="btn-view">
      <el-button size="mini" type="primary" @click="exportEvent">导出</el-button>
    </div>
    <div class="table-view">
      <vxe-table
        ref="xTable"
        border
        auto-resize
        highlight-current-row
        :radio-config="{ trigger: 'row' }"
        :start-index="(tablePage.pageNum - 1) * tablePage.pageSize"
        :loading="loading"
        show-overflow
        align="center"
        header-align="left"
        size="mini"
        :data="tableList"
      >
        <vxe-table-colgroup
          header-align="center"
          align="center"
          title="ee"
          header-class-name="fs"
        >
          <vxe-table-column
            type="seq"
            title="序号"
            align="center"
            fixed="center"
          ></vxe-table-column>
          <vxe-table-column
            header-align="center"
            align="center"
            field="orgName"
            label="名称"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="datasetCounts"
            header-align="center"
            align="center"
            label="数量"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="subCounts"
            header-align="center"
            align="center"
            label="调用次数"
            sortable
          ></vxe-table-column>
        </vxe-table-colgroup>
      </vxe-table>
    </div>
    <div class="pagination-view">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next,jumper"
        :current-page="tablePage.pageNum"
        :page-size="tablePage.pageSize"
        :page-sizes="pageSizes"
        :total="tablePage.total"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

• 导出方法

    exportEvent() {
      this.$refs.xTable.exportData({
        filename: 'export',// 文件名字
        sheetName: 'Sheet1',
        type: 'xlsx',//导出文件类型 xlsx 和 csv 
        data: this.exportdata, // 数据源
        // 过滤那个字段导出
        // columnFilterMethod: function(column, $columnIndex) {
        //   return !(column.$columnIndex === 0 )
        //   // 0是复选框 不导出
        // }
      })
    },