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>
相关推荐
扎量丙不要犟14 分钟前
excel合并表格
excel
Orange30151138 分钟前
ES6~ES11新特性全解析
java·前端·javascript·es6
敲敲敲敲暴你脑袋1 小时前
vue3中ref响应式变量为什么script中要用.value,而template模板中不需?
javascript·vue.js·visual studio code
Lanwarf-前端开发1 小时前
gis风场加载
开发语言·前端·javascript
海上彼尚1 小时前
ModuleJS 与 CommonJS 混用的两种解决方案
javascript·node.js
吃蛋糕的居居1 小时前
疯狂前端面试题(四)
前端·javascript·chrome·ajax·正则表达式·firefox·html5
一川晚照人闲立2 小时前
JEECGBOOT前端VUE3版本浏览器兼容支持chrome>=76版本方法
java·前端·vue.js·chrome·anti-design-vue·jeecgboot·jeecg
Lovely Ruby2 小时前
【ThreeJS Basics 1-3】Hello ThreeJS,实现第一个场景
javascript
前端加油站3 小时前
高级前端成长之路必看前端请求
前端·vue.js·react.js
lixww.cn3 小时前
ASP.NET Core SignalR向部分客户端发消息
javascript·websocket·vue·asp.net core·signalr