vue3 excel 导出功能

1.安装 xlsx 库

npm install xlsx

2.创建导出函数

src/utils/excelUtils.js

import * as XLSX from 'xlsx';const exportToExcel = (fileName, datas, sheetNames) => {// 创建工作簿const wb = XLSX.utils.book_new()for (let i = 0; i < datas.length; i++) {let data = datas[i];let sheetName = sheetNames[i];// 创建工作表let ws = XLSX.utils.json_to_sheet(data)// 将工作表放入工作簿中XLSX.utils.book_append_sheet(wb, ws, sheetName)}// 生成文件并下载XLSX.writeFile(wb, fileName)
}export default exportToExcel;

3.在组件中调用导出函数

<template><div><el-button  @click="exportExcel">导出 Excel</el-button></div></template><script lang="ts">import  exportToExcel  from '@/utils/excelUtils';const exportExcel = () => {const data2 = [{ name: 'Alice', age: 25, occupation: 'Engineer' },{ name: 'Bob', age: 30, occupation: 'Designer' },{ name: 'Carol', age: 28, occupation: 'Developer' }];const data3 = [{ name2: 'Alice', age: 27, occupation: 'Engineer' },{ name2: 'Bob', age: 31, occupation: 'Designer' },{ name2: 'Carol', age: 29, occupation: 'Developer' }];exportToExcel('user_data.xlsx', [data2, data3], ['Sheet1', 'Sheet_data3']);
};export default {methods: {exportExcel}
};</script>

在这里插入图片描述

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

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

相关文章

【腾讯云 Cloud Studio 实战训练营】使用 Cloud Studio 快速构建 Vue + Vite 完成律师 H5 页面

【腾讯云 Cloud Studio 实战训练营】使用 Cloud Studio 快速构建 Vue Vite 完成律师 H5 页面 前言一、基本介绍1.应用场景2.产品优势 二、准备工作1.注册 Cloud Studio2.进入 Vue 预置开发环境 三、使用 Cloud Studio 快速构建 Vue Vite 完成律师 H5 页面1.安装相关依赖包2.主…

Spring Boot2.xx开启监控 Actuator

spring boot actuator介绍 Spring Boot包含许多其他功能&#xff0c;可帮助您在将应用程序推送到生产环境时监视和管理应用程序。 您可以选择使用HTTP端点或JMX来管理和监视应用程序。 审核&#xff0c;运行状况和指标收集也可以自动应用于您的应用程序。 总之Spring Boot Ac…

【Transformer】自注意力机制Self-Attention | 各种网络归一化Normalization

1. Transformer 由来 & 特点 1.1 从NLP领域内诞生 "Transformer"是一种深度学习模型&#xff0c;首次在"Attention is All You Need"这篇论文中被提出&#xff0c;已经成为自然语言处理&#xff08;NLP&#xff09;领域的重要基石。这是因为Transfor…

【APITable】教程:创建并运行一个自建小程序

1.进入APITable&#xff0c;在想要创建小程序的看板页面点击右上角的【小程序】&#xff0c;进入小程序编辑页面。 2.创建一个新的小程序区。 点击【 添加小程序】 点击创建小程序&#xff0c;选择模板&#xff0c;输入名字。 3.确定后进入小程序部署引导页面。 4.打开Xshell 7…

201、仿真-基于51单片机PT100测温设计铂电阻温度计设计Proteus仿真(程序+Proteus仿真+原理图+流程图+元器件清单+配套资料等)

毕设帮助、开题指导、技术解答(有偿)见文未 目录 一、设计功能 二、Proteus仿真图 三、原理图 四、程序源码 资料包括&#xff1a; 方案选择 单片机的选择 方案一&#xff1a;STM32系列单片机控制&#xff0c;该型号单片机为LQFP44封装&#xff0c;内部资源足够用于本次设…

【vue+el-table+el-backtop】表格结合返回顶部使用,loading局部加载

效果图: 一. 表格结合返回顶部 二. 局部loading 解决方法: 一 返回顶部 target绑定滚动dom的父元素类名就可以了. 1.如果你的表格是 固定表头 的,那滚动dom的父元素类名就是 el-table__body-wrapper <el-backtop target".el-table__body-wrapper" :visibility…

项目介绍:《WeTalk》网页聊天室 — Spring Boot、MyBatis、MySQL和WebSocket的奇妙融合

目录 引言&#xff1a; 前言&#xff1a; 技术栈&#xff1a; 主要功能&#xff1a; 功能详解&#xff1a; 1. 用户注册与登录&#xff1a; 2. 添加好友 3. 实时聊天 4. 消息未读 5. 删除聊天记录 6. 删除好友 未来展望&#xff1a; 项目地址&#xff1a; 结语&am…

zookeeperAPI操作与写数据原理

要执行API操作需要在idea中创建maven项目 &#xff08;改成自己的阿里仓库&#xff09;导入特定依赖 添加日志文件 上边操作做成后就可以进行一些API的实现了 目录 导入maven依赖&#xff1a; 创建日志文件&#xff1a; 创建API客户端&#xff1a; &#xff08;1&#xff09…

阿里云服务器安装部署Docker使用教程

本文阿里云百科分享如何在云服务ECS实例上&#xff0c;部署并使用Docker。Docker是一款开源的应用容器引擎&#xff0c;具有可移植性、可扩展性、高安全性和可管理性等优势。开发者可将应用程序和依赖项打包到一个可移植的容器中&#xff0c;快速发布到Linux机器上并实现虚拟化…

学习51单片机怎么开始?

学习的过程不总是先打好基础&#xff0c;然后再盖上层建筑&#xff0c;尤其是实践性的、工程性很强的东西。如果你一定要先全面打好基础&#xff0c;再学习单片机&#xff0c;我觉得你一定学不好&#xff0c;因为你的基础永远打不好&#xff0c;因为基础太庞大了&#xff0c;基…

许多智能算法并不智能(续)

许多智能算法被认为并不智能&#xff0c;主要是因为它们在某些方面仍然存在一些限制。以下是一些常见的原因&#xff1a; 缺乏常识和理解能力&#xff1a;当前的智能算法主要依赖于大量的数据和模式识别来做出决策&#xff0c;但它们通常缺乏对世界的常识和深层理解。这意味着它…

Android界面设计与用户体验

Android界面设计与用户体验 1. 引言 在如今竞争激烈的移动应用市场&#xff0c;提供优秀的用户体验成为了应用开发的关键要素。无论应用功能多么强大&#xff0c;如果用户界面设计不合理&#xff0c;用户体验不佳&#xff0c;很可能会导致用户流失。因此&#xff0c;在Androi…

数据驱动与关键字驱动

初次接触自动化测试时&#xff0c;对数据驱动和关键字驱动不甚理解&#xff0c;觉得有点故弄玄须&#xff0c;不就是参数和函数其嘛&#xff01;其实其也体现了测试所不同与开发的一些特点&#xff08;主要指系统测试&#xff09;&#xff0c;以及和对技术发展的脉络的展现。 …

【TypeScript】this指向,this内置组件

this类型 TypeScript可推导的this类型函数中this默认类型对象中的函数中的this明确this指向 怎么指定this类型 this相关的内置工具类型转换ThisParameterType<>ThisParameterType<>ThisType TypeScript可推导的this类型 函数中this默认类型 对象中的函数中的this…

在CMamke生成的VS项目中插入程序

在主文件夹的CMakeLists.tex中加入SET(COMPILE_WITH_LSVM OFF CACHE BOOL "Compile with LSVM") 再添加IF(COMPILE_WITH_LSVM) MESSAGE("Compiling with: LSVM") ADD_DEFINITIONS(-DCOMPILE_WITH_LSVM) ADD_SUBDIRECTORY(LSVM) LIST(APPEND SRC LSVM_wrap…

MFC第三十天 通过CToolBar类开发文字工具栏和工具箱、GDI+边框填充以及基本图形的绘制方法、图形绘制过程的反色线模型和实色模型

文章目录 CControlBar通过CToolBar类开发文字工具栏和工具箱CMainFrame.hCAppCMainFrm.cppCMainView.hCMainView.cppCEllipse.hCEllipse.cppCLine.hCLine.cppCRRect .hCRRect .cpp CControlBar class AFX_NOVTABLE CControlBar : public CWnd{DECLARE_DYNAMIC(CControlBar)pro…

运营商二要素认证API接口:提供手机号实名验证服务,确保用户信息的真实性

随着互联网的快速发展&#xff0c;各行各业都需要用户进行实名认证。其中&#xff0c;涉及到用户个人信息的场景&#xff0c;如电商、游戏、直播、金融等需要用户实名认证的场景&#xff0c;必须要进行实名认证。然而&#xff0c;对于这些场景&#xff0c;用户的个人信息的真实…

使用Git进行项目版本控制

文章目录 1、什么是Git&#xff1f;2、安装Git3、Git汉化3.1 Git Bash汉化3.2 Git GUI汉化(了解) 4、快速上手Git基本命令5、Git是怎么运作的&#xff1f;6、工作区、暂存区、本地仓库、远程仓库的区别6.1 工作区6.2 暂存区6.3 本地仓库6.4 远程仓库6.4 总结 7、 Git具体工作流…

CClink IE转Modbus TCP网关连接三菱FX5U PLC

捷米JM-CCLKIE-TCP 是自主研发的一款 CCLINK IE FIELD BASIC 从站功能的通讯网关。该产品主要功能是将各种 MODBUS-TCP 设备接入到 CCLINK IE FIELD BASIC 网络中。 捷米JM-CCLKIE-TCP网关连接到 CCLINK IE FIELD BASIC 总线中做为从站使用&#xff0c;连接到 MODBUS-TCP 总线…

Flowable-边界事件-补偿边界事件

目录 定义图形标记XML内容使用示例演示demo 定义 补偿边界事件可以为所依附的节点附加补偿处理器&#xff0c;通过关联连接到补偿处理器&#xff08;compensation handler&#xff09;。补偿边界事件会在流程活动完成后根据情况&#xff08;事务取消或者补偿中间事件触发&…