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>
相关推荐
90后的晨仔34 分钟前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js
今天头发还在吗35 分钟前
【React】TimePicker进阶:解决开始时间可大于结束时间的业务场景与禁止自动排版
javascript·react.js·ant design
今天头发还在吗38 分钟前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
小刘不知道叫啥39 分钟前
React 源码揭秘 | suspense 和 unwind流程
前端·javascript·react.js
90后的晨仔1 小时前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(二)?
前端·vue.js
90后的晨仔1 小时前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(一)?
前端·vue.js
90后的晨仔2 小时前
Vue 异步组件(defineAsyncComponent)全指南:写给新手的小白实战笔记
前端·vue.js
木易 士心2 小时前
Vue 与 React 深度对比:底层原理、开发体验与实际性能
前端·javascript·vue.js
Lucky GGBond3 小时前
Vue + Spring Boot 实现 Excel 导出实例
vue.js·spring boot·excel
wyzqhhhh3 小时前
插槽vue/react
javascript·vue.js·react.js