当前位置: 首页 > news >正文

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>

在这里插入图片描述

相关文章:

vue3 excel 导出功能

1.安装 xlsx 库 npm install xlsx2.创建导出函数 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…...

python 相关框架事务开启方式

前言 对于框架而言&#xff0c;各式API接口少不了伴随着事务的场景&#xff0c;下面就列举常用框架的事务开启方法 一、Django import traceback from django.db import transaction from django.contrib.auth.models import User try:with transaction.atomic(): # 在with…...

vue使用ElementUI

1.安装 npm i element-ui -S 2.引入 2.1完整引入 import Vue from vue; import ElementUI from element-ui; import element-ui/lib/theme-chalk/index.css; import App from ./App.vue;Vue.use(ElementUI); 2.2按需引入 说明&#xff1a;为了输入时候有提示&#xff0c;建…...

Python做一个绘图系统3:从文本文件导入数据并绘图

文章目录 导入数据文件对话框修改绘图逻辑源代码 Python绘图系统系列&#xff1a;将matplotlib嵌入到tkinter 简单的绘图系统 导入数据 单纯从作图的角度来说&#xff0c;更多情况是已经有了一组数据&#xff0c;然后需要将其绘制。这组数据可能是txt格式的&#xff0c;也可能…...

flutter开发实战-获取Widget的大小及位置

flutter开发实战-获取Widget的大小及位置 最近开发过程中需要获取Widget的大小及位置&#xff0c;这时候就需要使用到了GlobalKey了和WidgetsBinding.instance.addPostFrameCallback了 一、addPostFrameCallback 该函数的作用&#xff1a; flutter中的界面组件Widget每一帧…...

软件测试工程师面试如何描述自动化测试是怎么实现的?

软件测试工程师面试的时候&#xff0c;但凡简历中有透露一点点自己会自动化测试的技能点的描述&#xff0c;都会被面试官问&#xff0c;那你结合你的测试项目说说自动化测试是怎么实现的&#xff1f;一到这里&#xff0c;很多网友&#xff0c;包括我的学生&#xff0c;也都一脸…...

Qt5兼容使用之前Qt4接口 intersect接口

1. 问题 项目卡中遇到编译报错&#xff0c; 错误 C2039 “intersect”: 不是“QRect”的成员 。 2. 排查过程 排查到依赖的第三方代码&#xff0c;使用 intersect 接口&#xff0c; 跟踪排查到头文件中使用了***#if QT_DEPRECATED_SINCE(5, 0)*** #if QT_DEPRECATED_SINCE…...

【云原生】Kubernetes节点亲和性分配 Pod

目录 1 给节点添加标签 2 根据选择节点标签指派 pod 到指定节点[nodeSelector] 3 根据节点名称指派 pod 到指定节点[nodeName] 4 根据 亲和性和反亲和性 指派 pod 到指定节点 5 节点亲和性权重 6 pod 间亲和性和反亲和性及权重 7 污点和容忍度 8 Pod 拓扑分布约束 官方…...

【Essential C++课后练习】纯代码(更新中)

文章目录 第一章 C编程基础1.41.51.61.71.8 第二章 面向过程的编程风格2.12.22.32.42.52.6 第一章 C编程基础 1.4 /*********************************************************************说明:试着扩充这个程序的内容&#xff1a;&#xff08;1&#xff09;要求用户同时输…...

C#仿热血江湖GClass

目录 1 C#仿热血江湖GClass 1.1 GClass32 1.2 method_4 1.3 smethod_0 C#仿热血江湖GClass public class GClass32 { private byte[] byte_0;...

[SQL智慧航行者] - 用户购买商品推荐

话不多说, 先看数据表信息. 数据表信息: employee 表, 包含所有员工信息, 每个员工有其对应的 id, salary 和 departmentid. --------------------------------- | id | name | salary | departmentid | --------------------------------- | 1 | Joe | 70000 | 1 …...

Idea配置Scala开发环境

1.首先安装scala插件&#xff1a; File--->Setting---->plugins,在输入框中输入scala&#xff0c;然后点击“Install”即可安装scala&#xff0c;需要稍微等待几分钟。 2 创建项目&#xff1a; File ---->new---->project-----Maven--->Next----输入名称(test…...

LT8711UXD 是一款高性能双通道 Type-C/DP1.4 至 HDMI2.0 转换器

LT8711UXD 1.描述 LT8711UXD是一款高性能的双车道TypeC/DP1.4到HDMI2.0转换器&#xff0c;设计用于将USB Type-C源或DP1.4源连接到HDMI2.0接收器。LT8711UXD集成了一个DP1.4兼容的接收机&#xff0c;和一个HDMI2.0兼容的发射机。此外&#xff0c;还包括两个CC控制器&#xff0…...

Android APK体积优化(瘦身)

1、基础知识&#xff1a; 1.1 apk结构 lib &#xff1a;存放so文件&#xff0c;对应不同的cpu架构 res &#xff1a;资源文件&#xff0c;layout、drawable等&#xff0c;经过aapt编译 assets &#xff1a;资源文件&#xff0c;不经过aapt编译 classes.dex &#xff1a;dx编译…...

python技术栈 之 单元测试中mock的使用

一、什么是mock&#xff1f; mock测试就是在测试过程中&#xff0c;对于某些不容易构造或者不容易获取的对象&#xff0c;用一个虚拟的对象来创建以便测试的测试方法。 二、mock的作用 特别是开发过程中上下游未完成的工序导致当前无法测试&#xff0c;需要虚拟某些特定对象…...

python 提取冒号和逗号内的字符串

如果你想要从字符串中提取冒号和逗号之间的内容&#xff0c;你可以使用正则表达式来完成。以下是使用 Python 的re模块进行提取的示例&#xff1a; import retext 这是一个包含:冒号,逗号:的字符串# 使用正则表达式匹配冒号和逗号之间的内容 pattern r[:](.*?)[,] matches …...

CentOS安装Postgresql

PG基本安装步骤 安装postgresql&#xff1a; sudo yum install postgresql-server初始化数据库&#xff1a;安装完毕后&#xff0c;需要初始化数据库并创建初始用户&#xff1a; sudo postgresql-setup initdb启动和停止服务&#xff1a; sudo systemctl start postgresql sudo…...

云原生可观测框架 OpenTelemetry 基础知识(架构/分布式追踪/指标/日志/采样/收集器)...

什么是 OpenTelemetry&#xff1f; OpenTelemetry 是一个开源的可观测性框架&#xff0c;由云原生基金会(CNCF)托管。它是 OpenCensus 和 OpenTracing 项目的合并。旨在为所有类型的可观测信号(如跟踪、指标和日志)提供单一标准。 https://opentelemetry.iohttps://www.cncf.io…...

多用户跨境电商商品库系统快速搭建(全开源)

搭建一个多用户跨境电商商品库系统需要以下步骤&#xff1a; 1. 确定系统需求&#xff1a;首先&#xff0c;需要明确系统的功能需求&#xff0c;包括商品管理、订单管理、用户管理、支付管理等。根据具体需求确定系统的功能和界面设计。 2. 确定技术栈&#xff1a;选择合适的…...

DataGrip 配置 HiveServer2 远程连接访问

文章目录 集群配置 HiveServer2 服务DataGrip 配置 HiveServer2 访问 Hive 集群配置 HiveServer2 服务 1.在 Hive 的配置文件 hive-site.xml 中添加如下参数&#xff1a; <!-- 指定 HiveServer2 运行端口&#xff0c;默认为&#xff1a;10000 --><property><na…...

E7Helper:第七史诗自动化脚本助手完全指南

E7Helper&#xff1a;第七史诗自动化脚本助手完全指南 【免费下载链接】e7Helper 【EPIC】第七史诗多功能覆盖脚本(刷书签&#x1f343;&#xff0c;挂讨伐、后记、祭坛✌️&#xff0c;挂JJC等&#x1f4db;&#xff0c;多服务器支持&#x1f4fa;&#xff0c;qq机器人消息通知…...

Kandinsky-5.0-I2V-Lite-5s从零部署:JDK1.8环境下的Java客户端开发

Kandinsky-5.0-I2V-Lite-5s从零部署&#xff1a;JDK1.8环境下的Java客户端开发 1. 引言 还在用JDK1.8开发企业级应用&#xff1f;想集成最新的Kandinsky-5.0-I2V-Lite-5s图像转视频模型却担心兼容性问题&#xff1f;这篇教程就是为你准备的。我们将从零开始&#xff0c;手把手…...

复旦微FM33 MCU 底层开发实战——从寄存器到外设精通

1. 初识复旦微FM33系列MCU 第一次拿到复旦微FM33LC0XX开发板时&#xff0c;我和大多数嵌入式开发者一样&#xff0c;习惯性地打开标准外设库开始写代码。但很快发现&#xff0c;当需要实现特定功能或优化性能时&#xff0c;库函数的封装反而成了障碍。这就像开车时只能使用自动…...

丹青识画系统与STM32嵌入式项目结合:智能相框原型开发

丹青识画系统与STM32嵌入式项目结合&#xff1a;智能相框原型开发 1. 项目缘起&#xff1a;当老相框遇上新AI 你有没有想过&#xff0c;家里墙上那个安安静静的相框&#xff0c;除了展示照片&#xff0c;还能做些什么&#xff1f; 我手头正好有几块闲置的STM32开发板和几块小…...

权威公布!AI时代剪辑学习秘籍,效率直接拉满!

我是深圳市好青春教育的技术老师&#xff0c;在AI时代&#xff0c;很多小伙伴对学习视频剪辑存在诸多疑问和困惑。比如&#xff0c;学习视频剪辑难不难&#xff1f;需要具备哪些基础&#xff1f;怎样才能快速掌握剪辑技术&#xff1f;进入这个行业有哪些途径&#xff1f;又该如…...

Chord视频理解工具开源可部署:支持国产昇腾/寒武纪平台适配路线

Chord视频理解工具开源可部署&#xff1a;支持国产昇腾/寒武纪平台适配路线 1. 引言&#xff1a;让AI看懂视频&#xff0c;本地部署更安心 你有没有遇到过这样的场景&#xff1f;手头有一段视频&#xff0c;想快速知道里面发生了什么&#xff0c;或者想精准找出某个特定的人或…...

三步搞定Windows远程桌面多用户配置:告别“不支持“困扰

三步搞定Windows远程桌面多用户配置&#xff1a;告别"不支持"困扰 【免费下载链接】rdpwrap RDP Wrapper Library 项目地址: https://gitcode.com/gh_mirrors/rd/rdpwrap 远程桌面多用户配置是许多Windows用户面临的共同挑战&#xff0c;特别是当系统提示&quo…...

Phi-3-mini-128k-instruct代码生成效果展示:自动补全Python与JavaScript函数

Phi-3-mini-128k-instruct代码生成效果展示&#xff1a;自动补全Python与JavaScript函数 最近在尝试各种代码生成模型&#xff0c;想找一个既轻量又聪明的编程助手。试了一圈&#xff0c;微软开源的Phi-3-mini-128k-instruct让我有点惊喜。它模型不大&#xff0c;但在理解编程…...

Qwen3-14B航天领域探索:遥测数据解读、任务规划建议、故障预案生成

Qwen3-14B航天领域探索&#xff1a;遥测数据解读、任务规划建议、故障预案生成 1. 航天领域AI应用概述 航天工程是典型的高复杂度系统工程&#xff0c;涉及海量数据处理、精密任务规划和严苛安全要求。传统工作流程面临三大核心挑战&#xff1a; 遥测数据解读&#xff1a;卫…...

上智院×魔搭×Datawhale:《AI4S实战派》教你用AI全面提升科研生产力

“论文代码下下来&#xff0c;环境配了两天&#xff0c;连import都报错。”“生成了个新材料结构&#xff0c;结果DFT一算——能量高得离谱&#xff0c;根本站不住&#xff01;”“蛋白质对接得分贼高&#xff0c;湿实验一做&#xff0c;全军覆没……”“想自动读文献&#xff…...