vue3里将table表格中的数据导出为excel

想要实现前端对表格中的数据进行导出,这里推荐使用xlsx这个依赖库实现。

1、安装

pnpm install xlsx

2、使用

import * as XLSX from "xlsx";

直接在组件里导入XLSX库,然后给表格table通过ref创建响应式数据拿到table实例,将实例传给XLSX.utils.table_to_book()方法,再使用XLSX.writeFile()就可以下载excel文件了。具体方法请看demo源代码。

3、demo源代码

<template><div class="page6"><div style="display:flex;justify-content: flex-end"><el-button type="primary" @click="exportExcel">导出</el-button></div><el-table ref="tableRef" :data="tableData" stripe style="width: 100%"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table></div>
</template><script setup>
import * as XLSX from 'xlsx'
const tableRef = ref(null)
const exportExcel = () =>{const tableDom = tableRef.value?.$el;if (tableDom) {const wb = XLSX.utils.table_to_book(tableDom);XLSX.writeFile(wb, '表格数据.xlsx');}}
const tableData = [{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},
]
</script><style lang="less" scoped>
.page6{width: 100%;height: 100%;padding: 20px;
}</style>

4、效果

下载的excel文件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/50801.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Selenium Grid 是如何帮助实现跨浏览器和跨平台测试的?

Selenium Grid是一个工具&#xff0c;它允许用户将测试脚本分布到多个机器和浏览器上运行&#xff0c;从而实现跨浏览器和跨平台的自动化测试。以下是Selenium Grid如何帮助实现这一目标的详细解释&#xff1a; 1. 集中管理 Selenium Grid通过一个中央节点&#xff08;Hub&am…

MySQL练手 --- 1633. 各赛事的用户注册率

题目链接&#xff1a;1633. 各赛事的用户注册率 思路&#xff1a; 两张表&#xff0c;一张为Users用户表&#xff0c;该表存储着所有用户的 user_id 和 user_name 另一张表为Register注册表&#xff0c;该表存储着赛事id&#xff08;contest_id&#xff09;&#xff0c;和已…

【MySQL进阶之路 | 高级篇】锁的概述以及读写并发问题

事务的隔离性是由锁来实现的。 1. 概述 锁是计算机协调多个进程或线程并发访问某一资源的机制。在程序开发中会存在很多线程同步的问题&#xff0c;当多个线程并发访问某个数据的时候&#xff0c;尤其是针对一些敏感的数据&#xff08;如订单&#xff0c;金额等&#xff09;&…

代理

使用代理发送HTTP请求 <!-- https://mvnrepository.com/artifact/org.apache.httpcomponents.client5/httpclient5 --> <dependency><groupId>org.apache.httpcomponents.client5</groupId><artifactId>httpclient5</artifactId><vers…

Qt背景与环境搭建

目录 ​编辑 一、Qt背景 1.行业岗位介绍 2.什么是Qt 3.Qt的发展史 4.Qt支持的平台 5.Qt的版本和优点 5.1 版本 5.2 优点 6.Qt的应用场景 7.Qt 的成功案例 8.Qt 发展前景 二、环境搭建 1.Qt 的开发工具概述 2.Qt SDK 的下载和安装 2.1 Qt SDK 的下载 ​编辑 2…

AI软件测试|人工智能测试中对抗样本生成攻略

从医疗诊断、自动驾驶到智能家居&#xff0c;人工智能技术为各个行业领域带来无限可能的同时&#xff0c;挑战也日益显现。特别是在人工智能安全领域&#xff0c;随着恶意攻击和数据欺骗的不断演变&#xff0c;确保AI系统的安全性和可靠性成为亟需解决的重要问题&#xff0c;对…

Mongodb通配符索引签名和使用限制

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第98篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题&#xff0c;欢迎在文章下面点个赞&#xff0c;或者关…

ArcGIS Pro SDK (九)几何 15 转换

ArcGIS Pro SDK &#xff08;九&#xff09;几何 15 转换 文章目录 ArcGIS Pro SDK &#xff08;九&#xff09;几何 15 转换1 创建地理转换2 创建复合地理变换3 创建投影转换4 创建高压基准变换5 创建复合高压基准变换6 决定转换7 地图点 - 地理坐标字符串转换 环境&#xff1…

构建现代化农业产业服务平台的系统架构

随着全球农业产业的发展和技术的进步&#xff0c;农业生产管理面临着越来越复杂的挑战和机遇。建立一个现代化的农业产业服务平台系统架构&#xff0c;不仅能够提高农业生产效率和管理水平&#xff0c;还能促进农民收入增长和可持续发展。本文将探讨如何设计和实施这样一个系统…

【计算机网络】期末实验答辩

注意事项&#xff1a; 1&#xff09;每位同学要在下面做过的实验列表中选取三个实验进行答辩准备&#xff0c;并将自己的姓名&#xff0c;学号以及三个实验序号填入共享文档"1&#xff08;2&#xff09;班答辩名单"中。 2&#xff09;在答辩当日每位同学由老师在表…

C# 使用pythonnet 迁入 python 初始化错误解决办法

pythonnet 从 3.0 版本开始&#xff0c;必须设置Runtime.PythonDLL属性或环境变量 例如&#xff1a; string pathToVirtualEnv ".\\envs\\pythonnetTest"; Runtime.PythonDLL Path.Combine(pathToVirtualEnv, "python39.dll"); PythonEngine.PythonHom…

vue路由跳转时改变路由参数组件不渲染问题【已解决】

效果展示 解决 router路由为了组件复用&#xff0c;防止组件的频繁销毁与创建&#xff0c;在遇到跳转的路由不一致才会进行重新渲染&#xff0c;路径参数变了他是不会管的&#xff0c;只会改变this.$route对象而已 就这个东西/:xxx 我们可以写一个watch监视this.$route对象。…

SQL语句(以MySQL为例)——单表、多表查询

笛卡尔积&#xff08;或交叉连接&#xff09;: 笛卡尔乘积是一个数学运算。假设我有两个集合 X 和 Y&#xff0c;那么 X 和 Y 的笛卡尔积就是 X 和 Y 的所有可能组合&#xff0c;也就是第一个对象来自于 X&#xff0c;第二个对象来自于 Y 的所有可能。组合的个数即为两个集合中…

python爬虫-事件触发机制

今天想爬取一些政策&#xff0c;从政策服务 (smejs.cn) 这个网址爬取&#xff0c;html源码找不到链接地址&#xff0c;通过浏览器的开发者工具&#xff0c;点击以下红框 分析预览可知想要的链接地址的id有了&#xff0c;进行地址拼接就行 点击标头可以看到请求后端服务器的api地…

GraphHopper路径规划导航(Android源码调试运行)

本文主要记录在运行graphhopper安卓版路径规划导航源码的步骤和遇到的问题。 成功运行了程序&#xff0c;但是路劲规划一直不成功&#xff0c;问题一开始是服务地址&#xff0c;后来又是key的问题&#xff0c;在这个项目中涉及到了graphhopper、mapbox、mapilion的key&#xff…

html+css+js 实现马赛克背景按钮

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享htmlcss 绚丽效果&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 文…

前端练习<HtmlCSS>——照片墙(附完整代码及实现效果)

这个小练习也来源于b站up小K师兄&#xff0c;大家可以通过下面的链接学习哦~up讲的非常详细。 纯CSS写一个简单酷炫的照片墙效果&#xff5e; 先看一下这个照片墙的效果&#xff1a; 1.鼠标没有放到图片上时&#xff0c;照片同比例&#xff0c;每张照片都有倒影的效果。 2.然…

生成式AI和LLM的革命:Transformer架构

近年来&#xff0c;随着一篇名为“Attention is All You Need”论文的出现&#xff0c;自然语言处理&#xff08;NLP&#xff09;领域经历了一场巨大的变革。2017年&#xff0c;在谷歌和多伦多大学发表了这篇论文后&#xff0c;Transformer架构出现了。这一架构不仅显著提升了N…

Spring RestTemplate:简化HTTP请求的利器

在现代Web开发中&#xff0c;HTTP请求是与外部服务交互的主要方式之一。Spring框架提供的RestTemplate工具&#xff0c;大大简化了HTTP请求的发送和处理过程&#xff0c;让开发者可以更加专注于业务逻辑的实现。本文将带你了解RestTemplate的基本用法及其在实际项目中的配置方法…

【BUG】已解决:ERROR: Failed building wheel for jupyter-nbextensions-configurator

ERROR: Failed building wheel for jupyter-nbextensions-configurator 目录 ERROR: Failed building wheel for jupyter-nbextensions-configurator 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我…