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>
相关推荐
前端君3 小时前
实现最大异步并发执行队列
javascript
知识分享小能手4 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队5 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军5 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy5 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端6 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿6 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL6 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉6 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~6 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js