1、安装:
npm install file-saver xlsx --save-dev
cnpm install file-saver xlsx --save-dev //淘宝镜像
2、引入:
import FileSaver from 'file-saver'
import * as xlsx from 'xlsx'
3、点击事件&&table表格代码块:
<el-button type="text" size="mini" icon="el-icon-bottom" style="float: right;" @click="exportTable">导出Excel表</el-button>
<el-table id="table2" :data="tableData" style="width: 100%" size="mini" :header-cell-style="{background:'#f9f9f9'}" :default-sort="{prop: 'date'}">
<el-table-column
v-for="(item, index) in tableTags"
:key="index"
:prop="item.prop"
:label="item.title"
:sortable="item.prop === 'date'"
:show-overflow-tooltip="true"
align="center"
:min-width="item.title === '日期' ? '140px' : ''"
>
<template v-if="item.title === '日期'" v-slot="res">
<div>{{ getParseTime(res.row.date) }}</div>
</template>
<template v-else-if="item.title !== '新增人数' && item.title !== '日期'" v-slot="res">
<el-progress :text-inside="true" :stroke-width="20" :percentage="parseInt(res.row[item.prop])" color="#64b5ff" />
</template>
</el-table-column>
</el-table>
4、点击事件exportTable
// 导出excel表
exportTable() {
// table 关联导出的DOM节点
const fixed = document.querySelector('.el-table__fixed')
let wb
const excelTitle = '标题'
if (fixed) {
wb = xlsx.utils.table_to_book(
document.querySelector('#table2').removeChild(fixed)
)
document.querySelector('#table2').appendChild(fixed)
} else {
wb = xlsx.utils.table_to_book(document.querySelector('#table2'))
}
const wbout = xlsx.write(wb, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
})
try {
FileSaver.saveAs(
new Blob([wbout], { type: 'application/octet-stream' }),
excelTitle + '.xlsx'
)
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbout)
}
return wbout
}