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>
相关推荐
香香甜甜的辣椒炒肉5 小时前
vue(7)-单页应用程序&路由
前端·javascript·vue.js
dreams_dream5 小时前
vue中axios与fetch比较
前端·javascript·vue.js
梦鱼6 小时前
Vue 项目图标一把梭:Iconify 自用小记(含 TS/JS 双版本组件)
前端·javascript·vue.js
给月亮点灯|6 小时前
Vue基础知识-脚手架开发-初始化目录解析
前端·javascript·vue.js
周小码6 小时前
CesiumJS详解:打造专业级Web 3D地球仪与地图的JavaScript库
前端·javascript·3d
哆啦A梦15886 小时前
Element-Plus
前端·vue.js·ts
前端小巷子7 小时前
JS 打造丝滑手风琴
前端·javascript·面试
Mintopia7 小时前
多模态 AIGC 在 Web 内容创作中的技术融合实践:把“创作引擎”装进浏览器
前端·javascript·aigc
Mintopia7 小时前
Next.js 的 Web Vitals 监测与 Lighthouse 分析:从底层到实战的快乐科学
前端·javascript·next.js
一枚前端小能手7 小时前
「周更第2期」实用JS库推荐:Rsbuild
前端·javascript