Vue3 导出excel

🙂博主:锅盖哒
🙂文章核心:导出excel
目录
首先,你需要安装xlsx库。可以使用npm或yarn来安装:
在Vue组件中,你可以使用xlsx库来生成Excel文件并提供一个导出按钮供用户下载。
在Vue 3中,你可以使用第三方库xlsx来生成并导出Excel文件。下面是一个简单的实现示例:
首先,你需要安装xlsx库。可以使用npm或yarn来安装:
npm install xlsx --save
在Vue组件中,你可以使用xlsx库来生成Excel文件并提供一个导出按钮供用户下载。
<template><div><!-- 此处是你的页面内容 --><button @click="exportToExcel">导出Excel</button></div>
</template><script>
import XLSX from 'xlsx';export default {methods: {exportToExcel() {// 获取需要导出的数据,此处为示例数据const data = [['姓名', '年龄', '职业'],['John Doe', 30, 'Developer'],['Jane Smith', 25, 'Designer'],['Bob Johnson', 35, 'Manager'],];// 创建一个空的Workbook对象const wb = XLSX.utils.book_new();// 创建一个新的Worksheetconst ws = XLSX.utils.aoa_to_sheet(data);// 将Worksheet添加到Workbook中XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');// 生成Excel文件的Binary字符串const excelBinaryString = XLSX.write(wb, { type: 'binary' });// 将Binary字符串转换为Blob对象const blob = new Blob([s2ab(excelBinaryString)], { type: 'application/octet-stream' });// 导出Excel文件const fileName = 'example.xlsx';if (navigator.msSaveBlob) {// 兼容IE浏览器navigator.msSaveBlob(blob, fileName);} else {const link = document.createElement('a');link.href = URL.createObjectURL(blob);link.download = fileName;link.click();URL.revokeObjectURL(link.href);}},},
};// 将s字符串转换为Uint8Array
function s2ab(s) {const buf = new ArrayBuffer(s.length);const view = new Uint8Array(buf);for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;return buf;
}
</script>
上述代码中,我们首先获取需要导出的数据,然后使用xlsx库来创建一个新的Excel Workbook,并在其中添加一个Worksheet,并将数据添加到该Worksheet中。最后,将Workbook导出为Binary字符串,然后将其转换为Blob对象,并提供一个下载链接供用户下载。
请注意,以上示例是一个简单的Excel导出实现。在实际应用中,你可能需要更复杂的数据处理和更多的选项来配置导出的Excel文件。同时,要确保在使用
XLSX.write导出Excel文件时,传递的type参数设置为'binary',这样可以确保正确地生成Excel文件的Binary字符串。

相关文章:
Vue3 导出excel
🙂博主:锅盖哒 🙂文章核心:导出excel 目录 首先,你需要安装xlsx库。可以使用npm或yarn来安装: 在Vue组件中,你可以使用xlsx库来生成Excel文件并提供一个导出按钮供用户下载。 在Vue 3中&…...
vue 使用vue-json-viewer 展示 JSON 格式的数据
npm install vue-json-viewer --save<el-button type"primary" click"previewClick">预览</el-button><el-dialog title"预览" :visible.sync"previewVisible" width"70%"><viewer ref"viewer&qu…...
14.python设计模式【模板方法模式】
内容:定义一个操作中的算法的骨架,而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个算法的结构即可重定义该算法某特定步骤。 角色: 抽象类(AbstractClass):定义抽象的原子操作(钩子…...
谷粒商城第六天-实现功能的前序工作(网关的配置 跨域配置)
目录 一、为什么要做这项工作 1.1 为什么要配置网关 1.2 为什么要使用网关统一配置跨域 二、网关配置 三、统一跨域配置 四、总结 一、为什么要做这项工作 1.1 为什么要配置网关 我们知道网关的作用其实主要就是进行路由的,也就是根据前端发送到网关的请求&…...
为什么说国内数字孪生平台gis架构采用Cesium是不错的选择?
Gis作为数字孪生平台开发中重要的一环对数字孪生平台是否好用是一个重要的判定方式,国内数字孪生软件在融合GIS系统方面采取了多种方式,例如Unity或Unreal Engine等游戏引擎,以增强数字孪生的空间感知和空间分析能力,提供更全面、…...
前端面试的性能优化部分(1)每篇10题
1. 懒加载的概念 懒加载(Lazy Loading)是一种优化技术,它用于延迟加载页面资源,只在需要时才加载特定的内容,而不是在页面初始加载时一次性加载所有资源。懒加载的目的是提高页面加载速度和性能,尤其对于单…...
GitLab备份升级
数据备份(默认的备份目录在/var/opt/gitlab/backups/下,生成一个以时间节点命名的tar包。) gitlab-rake gitlab:backup:create新建repo源,升级新版本的gitlab vim /etc/yum.repos.d/gitlab-ce.repo [gitlab-ce] namegitlab-ce baseurlhttps://mirrors.…...
Matlab实现遗传算法仿真(附上40个仿真源码)
遗传算法(Genetic Algorithm,GA)是一种基于生物进化理论的优化算法,通过模拟自然界中的遗传过程,来寻找最优解。 在遗传算法中,每个解被称为个体,每个个体由一组基因表示,每个基因是…...
git使用(由浅到深)
目录流程图 1. 分布式版本控制与集中式版本控制 1.1 集中式版本控制 集中式版本控制系统有:CVS和SVN它们的主要特点是单一的集中管理的服务器,保存所有文件的修订版本;协同开发人员通过客户端连接到这台服务器,取出最新的文件或者提交更新…...
NAT协议(网络地址转换协议)详解
NAT协议(网络地址转换协议)详解 为什么需要NATNAT的实现方式静态NAT动态NATNAPT NAT技术的优缺点优点缺点 NAT协议是将IP数据报头中的IP地址转换为另外一个IP地址的过程,主要用于实现私有网络访问公有网络的功能。这种通过使用少量的IP地址代…...
pytorch(续周报(1))
文章目录 2.1 张量2.1.1 简介2.1.2 创建tensor2.1.3 张量的操作2.1.4 广播机制 2.2 自动求导Autograd简介2.2.1 梯度 2.3 并行计算简介2.3.1 为什么要做并行计算2.3.2 为什么需要CUDA2.3.3 常见的并行的方法:网络结构分布到不同的设备中(Network partitioning)同一层…...
el-table 树形结构数据 设置某一层,新增按钮不展示
<template><div><el-table:data"tableData":row-class-name"rowClassName":tree-props"{ children: children, hasChildren: hasChildren }"><!-- 表格列定义 --><!-- ... --><el-table-column label"操作…...
【Unity2D】粒子特效
为什么要使用粒子特效 Unity 的粒子系统是一种非常强大的工具,可以用来创建各种各样的游戏特效,如火焰、烟雾、水流、爆炸等等。使用粒子特效可以使一些游戏动画更加真实或者使游戏效果更加丰富。 粒子特效的使用 在Hierarchy界面右键添加Effects->…...
第九十六回 网络综合示例:获取天气信息
文章目录 概念介绍使用方法示例代码 我们在上一章回中介绍了dio库中转换器相关的内容,本章回中将介绍网络综合示例:获取天气信息.闲话休提,让我们一起Talk Flutter吧。 概念介绍 我们在前面章回中介绍了网络操作相关的内容,本章…...
Shell中获取昨天和多天前日期
1、获取今天日期 $ date -d now %Y-%m-%d 或者 $ date %F2、获取明天日期 $ date -d next-day %Y-%m-%d $ date -d tomorrow %Y-%m-%d3、获取昨天日期 $ date -d yesterday %Y-%m-%d 或者 $ date -d last-day %Y-%m-%d 或者 $ date -d "1 days ago" %Y-%m-%d …...
golang静态编译及编译失败排查步骤
文章目录 一、背景前提 二、静态编译概述1、执行静态编译设置CGO_ENABLED方式指定link方式 2、编译报错分析(1)确认系统上有没有安装libopus(2)设置LD_LIBRARY_PATH 三、详细排查过程1、下载bpf排查工具bcc, bcc-tools,python-bcc…...
2023年7月第4周大模型荟萃
2023年7月第4周大模型荟萃 2023.7.31版权声明:本文为博主chszs的原创文章,未经博主允许不得转载。 1、Cerebras推出全球最强AI超算 AI芯片初创公司Cerebras Systems和总部位于阿联酋的技术控股集团G42于7月20日宣布,携手打造一个由互联的超…...
Meta分析的选题与文献计量分析CiteSpace应用丨R语言Meta分析【数据清洗、精美作图、回归分析、诊断分析、不确定性及贝叶斯应用】
目录 专题一、Meta分析的选题与文献计量分析CiteSpace应用 专题二、Meta分析与R语言数据清洗及相关应用 专题三、R语言Meta分析与精美作图 专题四、R语言Meta回归分析 专题五、R语言Meta诊断分析与进阶 专题六、R语言Meta分析的不确定性及贝叶斯应用 专题七、深度拓展…...
vscode eslint配置
1. 全局安装 eslint npm install -g eslint 2. control shift p 输入 settings 打开设置进行配置 3. 添加配置 {"workbench.colorTheme": "One Dark Pro","eslint.debug": true,"eslint.execArgv": null,"eslint.alwaysShow…...
C++ 对象模型 C++ Object Model
C 对象模型 C Object Model 文章目录 C 对象模型 C Object ModelC语言的数据及函数C的类C对象模型 C语言的数据及函数 C语言中,数据和函数是分开声明的。 数据 typedef struct point2d {float x;float y; } Point2d;函数 打印Point2d的数值 void Point2d_print…...
Cursor实现用excel数据填充word模版的方法
cursor主页:https://www.cursor.com/ 任务目标:把excel格式的数据里的单元格,按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例,…...
.Net框架,除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
pam_env.so模块配置解析
在PAM(Pluggable Authentication Modules)配置中, /etc/pam.d/su 文件相关配置含义如下: 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块,负责验证用户身份&am…...
Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库,获取股票数据,并生成TabPFN这个模型 可以识别、处理的格式,写一个完整的预处理示例,并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务,进行预测并输…...
VTK如何让部分单位不可见
最近遇到一个需求,需要让一个vtkDataSet中的部分单元不可见,查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行,是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示,主要是最后一个参数,透明度…...
AI编程--插件对比分析:CodeRider、GitHub Copilot及其他
AI编程插件对比分析:CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展,AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者,分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
C++使用 new 来创建动态数组
问题: 不能使用变量定义数组大小 原因: 这是因为数组在内存中是连续存储的,编译器需要在编译阶段就确定数组的大小,以便正确地分配内存空间。如果允许使用变量来定义数组的大小,那么编译器就无法在编译时确定数组的大…...
push [特殊字符] present
push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中,push 和 present 是两种不同的视图控制器切换方式,它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...
逻辑回归暴力训练预测金融欺诈
简述 「使用逻辑回归暴力预测金融欺诈,并不断增加特征维度持续测试」的做法,体现了一种逐步建模与迭代验证的实验思路,在金融欺诈检测中非常有价值,本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...
