vue3 element plus 把表格数据导出到excel

背景:需要把表格数据导出到excel

步骤:

1.安装

javascript 复制代码
npm install --save xlsx file-saver

2.在导出的页面

javascript 复制代码
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'

3.使用(核心代码)

javascript 复制代码
<template>
    <div class="index">
        <el-button type="primary" @click="save">导出</el-button><!-- 导出按钮 -->
        <!-- 表格组件 -->
        <el-table :data="tableData" style="width: 100%" border id="el-table" ref="tableRef">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="姓名" prop="name" />
            <el-table-column label="性别" prop="age" width="180" />
            <el-table-column label="电话" prop="phone" width="180" />
            <el-table-column label="电子邮件" prop="email" width="180" />
            <el-table-column label="介绍" prop="introduce" width="260" />
        </el-table>
    </div>
</template>
<script setup lang="ts">
// 依赖引入
import FileSaver from "file-saver";
import * as XLSX from 'xlsx'




function save() {
    nextTick(function () {
        let filename = ''
        const xlsxParam = { raw: true } //转化成Excel使用原始格式
        const elTable = XLSX.utils.table_to_book(document.getElementById('el-table'), xlsxParam)
         filename = '导出测试.xlsx'
        const wbout = XLSX.write(elTable, { bookType: 'xlsx', bookSST: true, type: 'array' })
        try {
            FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), filename)
        } catch (e) {
            if (typeof console !== 'undefined') {
                console.log(e, wbout)
            }
        }
        return wbout
    })
}
</script>
相关推荐
Tomorrow'sThinker44 分钟前
[特殊字符] Python 自动查找替换 Excel 单元格内容 —— 高效批量处理
excel
Shipley Leo44 分钟前
如何在Excel中每隔几行取一行
excel
bing_1581 小时前
Excel 数据透视表不够用时,如何处理来自多个数据源的数据?
excel
巴巴_羊1 小时前
React Ref使用
前端·javascript·react.js
徊忆羽菲1 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃2 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
markyankee1012 小时前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
coding随想2 小时前
JavaScript中的BOM:Window对象全解析
开发语言·javascript·ecmascript
難釋懷2 小时前
TypeScript-webpack
javascript·webpack·typescript
Rockson2 小时前
使用Ruby接入实时行情API教程
javascript·python