前端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是复选框 不导出
// }
})
},