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

news/2024/11/29 23:36:42/

背景:需要把表格数据导出到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>

http://www.ppmy.cn/news/1551026.html

相关文章

深度学习与持续学习:人工智能的未来与研究方向

文章目录 1. 持续学习与深度学习1.1 深度学习的局限1.2 持续学习的定义 2. 目标与心智2.1 奖励假说2.2 心智的构成 3. 对研究方法的建议3.1 日常写作记录3.2 中立对待流行趋势 1. 持续学习与深度学习 1.1 深度学习的局限 深度学习注重“瞬时学习”&#xff0c;如ChatGPT虽在语…

用户管理(MySQL)

目录 1用户管理&#xff08;MySQL&#xff09; 1.1 用户 1.1.1 用户信息 1.1.2 创建用户(后%是可以任意远端登录) 1.1.3 刷新一下 1.1.4 删除用户 1.1.5 修改用户密码 1.2 数据库的权限 1.2.1 登录创建用户 1.2.2给权限 1.2.2.1 把jj数据库中uu表的权限给woaini这个…

如何处理vue项目中的错误的?都有哪些错误类型?

在 Vue 项目中,错误的处理至关重要,它帮助开发者捕捉并修复应用中的问题。Vue.js 提供了多种机制来帮助我们处理和调试错误,包括 Vue 的内置错误处理机制和常见的 JavaScript 错误处理方式。本文将分析 Vue 中错误的分类以及如何在 Vue 项目中进行处理,结合源码来理解其内部…

Java基础 设计模式——针对实习面试

目录 Java基础 设计模式单例模式工厂模式观察者模式策略模式装饰器模式其他设计模式 Java基础 设计模式 单例模式 单例模式&#xff08;Singleton Pattern&#xff09; 定义&#xff1a;确保一个类只有一个实例&#xff0c;并提供一个全局访问点来访问这个实例。适用场景&…

群控系统服务端开发模式-应用开发-邮箱配置功能开发

邮箱配置主要是将管理员数据做归属。具体见下图&#xff1a; 一、创建表 1、语句 CREATE TABLE cluster_control.nc_param_mail (id int(11) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 编号,title varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT…

List集合的进一步学习:性能优化

|| 持续分享系列教程&#xff0c;关注一下不迷路 || || B站视频教程&#xff1a;墨轩大楼 || || 知识星球&#xff1a;墨轩编程自习室 || 在Java集合框架中&#xff0c;选择合适的集合类型和使用正确的操作…

Flink四大基石之Window

为什么要用WIndow 在流处理应用中&#xff0c;数据是连续不断的&#xff0c;有时我们需要做一些聚合类的处理&#xff0c;例如&#xff1a;在过去的1分钟内有多少用户点击了我们的网页。 在这种情况下&#xff0c;我们必须定义一个窗口(window)&#xff0c;用来收集最近1分钟内…

论文笔记 SliceGPT: Compress Large Language Models By Deleting Rows And Columns

欲买桂花同载酒&#xff0c;终不似&#xff0c;少年游。 数学知识 秩&#xff1a; 矩阵中最大线性无关的行/列向量数。行秩与列秩相等。 线性无关&#xff1a;对于N个向量而言&#xff0c;如果任取一个向量 v \textbf{v} v&#xff0c;不能被剩下的N-1个向量通过线性组合的方式…