OK，功能非常简单，但是很实用啊！

依赖安装

这里我们需要安装两个依赖： xlsx 和 file-saver，就可以帮助我们实现功能了！

 npm i xlsx file-saver

代码参考

导出方法
utils/index.js

import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'export const exportExcel = (el, name) => {// 根据 table 生成一个工作表const worksheet = XLSX.utils.table_to_sheet(el)// 创建一个空工作簿const workbook = XLSX.utils.book_new()// 将工作表附加到工作簿XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1', true)// 写入工作簿并返回文件   bookType（导出文件的文件格式）  type （返回值类型）const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })const data = new Blob([excelBuffer], { type: 'application/octet-stream' })FileSaver.saveAs(data, name + '.xlsx')
}

注意：
以下是低版本导入方法，最新版本获取 XLSX 为 undefined，建议统一按上述导入。

import XLSX from 'xlsx'

index.vue

<template><div class="table"><el-table ref="elTab"></el-table></div>
</template><script>
import { exportExcel } from "@utils/index.js"
export default {methods: {export() {exportExcel(this.refs.elTab.$el, "xxx");},}
}
</script>

效果展示

el-table 表格

excell 表格

题外话

在这里做一个提醒！！！

如果你用了 Element 的 table 组件，并且做了某一列固定，那么这时候导出会出现一个数据重复bug：导出的 excell 中包含重复的表格数据。

正常表格是行排列组成的表格，而使用了 fixed 属性的表格，里面多了列排列组成的表格，就相当于一个 table 中包含了两组表格数据，所以导出就会出现两组相同的数据。

解决：

export() {// 手动获取其中一组表格数据		el-table__fixed 是列组合数据let el = document.querySelector(".el-table__fixed")exportExcel(el, "xxx");
},