Vue Element Ui纯前端实现当前页的表格导出Excel

需求：
将下表数据导出excel文件,
注意：如果数据太多还是使用后端传文件流的方式

方法：

一、安装依赖

npm install --save xlsx
npm install --save file-saver

1
2
二、添加属性
标签添加ref属性，用于获取该元素el；也可添加id属性获取
表格内容省略

…
1
三、添加方法

// 导入依赖

import XLSX from 'xlsx'
import FileSaver from 'file-saver'

// 导出方法

 exportBtn() {
                this.$confirm('该操作将导出当前页所有数据，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const xlsxParam = { raw: true };//转换成excel时，使用原始的格式(时间太长不能正常显示添加此语句)
                // 获取表格元素
                const el = this.$refs.exportTableRef.$el

                // 文件名
                const filename = 'AOI数据导出.xlsx'
                /* generate workbook object from table */
                const wb = XLSX.utils.table_to_book(el,xlsxParam)
                /* get binary string as output */
                const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
                try {
                    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), filename)
                } catch (e) {
                    console.log(e)
                }
                return wbout
                }).catch(() => { });
            },

结果：