uniapp和vue如何使用SheetJS导出excel?

uniapp和vue如何使用SheetJS导出excel?

SheetJS中文文档详解

一、SheetJS是什么

SheetJS是一款适用于浏览器和Node.js的开源电子表格解析库。
与其他电子表格解析库相比,SheetJS拥有强大的电子表格解析功能,即使电子表格很大,也可以轻松处理。
同时,SheetJS支持大量的电子表格格式,如Excel、CSV、OpenDocument等。

二、SheetJS的安装

使用SheetJS需要先将其安装到项目中。安装方法有两种:可以通过npm安装,也可以直接下载文件。

通过npm安装SheetJS:

npm install xlsx

直接下载SheetJS,可以在官网(https://sheetjs.com)中下载压缩包,或者使用CDN直接引入。

<!--使用CDN-->
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>

附官网github链接:https://github.com/SheetJS/sheetjs
以及官网文档:https://docs.sheetjs.com/docs/

三、SheetJS的使用

下面是将JSON数据写入到Excel表格中的示例:

/* 生成数据 */
var data = [{ name: '小明', age: 20, gender: '男' },{ name: '小红', age: 21, gender: '女' },{ name: '小刚', age: 22, gender: '男' }
];
/* 将JSON数据转化为工作簿 */
var worksheet = XLSX.utils.json_to_sheet(data);
/* 生成Excel文件 */
var workbook = XLSX.utils.book_new();
/* 将工作簿添加到工作簿集合中 */
XLSX.utils.book_append_sheet(workbook, worksheet, 'SheetJS');
/* 导出Excel文件 */
XLSX.writeFile(workbook, '文件名.xlsx');

上面的代码中,SheetJS使用XLSX.utils.json_to_sheet()将JSON数据生成工作簿,使用XLSX.utils.book_new()生成新的工作簿集合,并将工作簿通过XLSX.utils.book_append_sheet()添加到工作簿集合中,最后通过XLSX.writeFile()导出Excel文件。

附:导出excel的表头修改

貌似SheetJS并未直接提供表头的显示修改,默认显示data的“name”,“age”,“gender”字段,如需要显示“姓名”,“年龄”,“性别”,需要自己将data数据转换,以下是博主写的转换方法:

var data = [{ name: '小明', age: 20, gender: '男' }, { name: '小红', age: 21, gender: '女' }];
var header = {name: '姓名',age: '年龄',gender: '性别'
};
data = data.map(item => {let obj = {};for (let key in item) {if (header[key]) {obj[header[key]] = item[key];} else {obj[key] = item[key];}}return obj;
});

效果如:

姓名	年龄	性别
小明	20	男
小红	21	女
小刚	22	男

四、SheetJS的更多用法

更多api方法:

aoa_to_sheet //将JS数据数组转换为工作表。
json_to_sheet //将JS对象数组转换为工作表。
table_to_sheet //将DOM表元素转换为工作表。
sheet_add_aoa //将JS数据数组添加到现有工作表中。
sheet_add_json //将JS对象数组添加到现有工作表中。
sheet_add_dom //将DOM表元素中的数据添加到现有工作表中
sheet_to_json //将工作表对象转换为JSON对象数组。
sheet_to_csv //生成分隔符分隔的值输出。
sheet_to_txt //生成UTF16格式的文本。
sheet_to_html //生成HTML输出。
sheet_to_formulae //生成公式列表(具有值回退)。

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

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

相关文章

Transformer注意力机制模型介绍

文章目录 前言高层次的自我关注(Self-Attention at a High Level)编码器(Encoder)多头注意力机制(The Beast With Many Heads)残差神经网络解码器(Decoder)线性(Linear)层和softmax层位置编码总结参考文献前言 Transformer是一个利用注意力机制来提高模型训练速度的模型。关于…

RT-DETR优化:轻量化卷积设计 | DualConv双卷积魔改RT-DETR结构

🚀🚀🚀本文改进: DualConv双卷积魔改v8结构,达到轻量化的同时并能够实现小幅涨点 🚀🚀🚀RT-DETR改进创新专栏:http://t.csdnimg.cn/vuQTz 学姐带你学习YOLOv8,从入门到创新,轻轻松松搞定科研; RT-DETR模型创新优化,涨点技巧分享,科研小助手; 1.DualC…

软件测试经典面试题(答案解析+视频讲解)

前言 &#xff08;第一个就刷掉一大批人&#xff09; 有很多“会自动化”的同学来咨询技术问题&#xff0c;他总会问到我一些元素定位的问题。元素定位其实都不算自动化面试的问题。 一般我都会问&#xff1a;你是定位不到吗&#xff1f;通常结果都是说确实定位不到。 做自…

真正可行的vue3迁移到nuxt3方法(本人亲测,完全避坑)

终于到了总结经验的时候了&#xff0c;这绝对是全网唯一、完全真正可行的干货。 在我看来&#xff0c;知识就是要拿来分享的&#xff0c;分享给他人也是在提高自己。我绝对不会搞什么订阅或者vip专栏来搞钱坑害各位&#xff0c; 因为我在csdn写文章最主要的目的是为了记录和总…

OpenJDK十几种发行版中强烈推荐的发行版:Adoptium Eclipse Temurin和Amazon Corretto

Adoptium Eclipse Temurin官网地址&#xff1a;Home | Adoptium 支持及维护它的厂家&#xff1a; 说明&#xff1a;它的前身是著名的AdoptOpenJDK&#xff0c;更新到jdk16后就停止更新了&#xff0c;因为AdoptOpenJDK移交给Eclipse基金会后改名为&#xff1a;Adoptium Eclipse…

【开题报告】基于SpringBoot的煤炭企业安全宣传学习平台的设计与实现

1.选题背景 煤炭企业作为我国能源行业的重要组成部分&#xff0c;承担着国民经济的支撑和推动作用。然而&#xff0c;煤炭生产过程中存在较高的安全风险&#xff0c;煤矿事故频发&#xff0c;给人员生命财产安全带来严重威胁&#xff0c;也给社会稳定和经济发展带来不利影响。…

多线程 (下) - 学习笔记

常见锁策略 乐观锁和悲观锁 悲观锁 总是假设最坏的情况, 每次去拿数据的时候都会认为会被别人修改, 因此会上锁, 防止数据在使用过程中被别的线程修改, 乐观锁 假设数据一般情况下不会产生并发冲突,因此在拿数据,操作数据的过程中不加锁, 而在数据进行提交更新的时候, 才会正…

LeetCode day24

LeetCode day24 今天主打一个快乐happy(▽ʃ♡ƪ)&#xff0c;主要是今天写哈夫曼树被经典文件读取坑麻了&#xff08;为啥绝对路径能读取&#xff0c;相对不行。罢了&#xff09; 一个中等题&#xff0c;但是咋感觉很小学捏。。。 2177. 找到和为给定整数的三个连续整数 相…

C与C++编程语言的区别和联系

一、引言 C和C是两种广泛使用的编程语言&#xff0c;它们都在软件开发领域有着广泛的应用。虽然C是从C语言演化而来的&#xff0c;但两者之间存在一些重要的区别和联系。本文将详细介绍这两种编程语言的相同点和不同点&#xff0c;并通过实际例子进行说明。 二、C与C的相同点 …

RocketMq常见问题

如何保证消息不丢失? 产生丢失消息的节点主要有以下几点 生产者发到brokerbroker把消息从缓存写入磁盘breker同步到从节点消费者消费消息消息积压太多, 会删除历史消息, 这里不会校验消息有没有消费 解决: 生产者同步发送消息, 如果发送失败, 写重试逻辑, 如果重试多次还失…

机器学习笔记 - 了解学习率对神经网络性能的影响

一、简述 深度学习神经网络使用随机梯度下降优化算法进行训练。学习率是一个超参数,它控制每次更新模型权重时响应估计误差而改变模型的程度。学习率值太小可能会导致训练过程过长并可能陷入困境,而值太大可能会导致过快地学习次优权重或训练过程不稳定。 配置神经网络时,学…

基于Java SSM框架实现抗疫医疗用品销售系统项目【项目源码+论文说明】

基于java的SSM框架实现抗疫医疗用品销售系统演示 摘要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;抗疫医疗用品销售平台当然也不能排除在外。抗疫医疗用品销售平台是以实…

微服务黑马头条(简略笔记)

Linux中nacos的拉取安装 拉取naocs镜像&#xff1a;docker pull nacos/nacos-server:1.2.0创建容器&#xff1a;docker run --env MODEstandalone --name nacos --restartalways -d -p 8848:8848 nacos/nacos-server:1.2.0访问地址&#xff1a;http://192.168.200.130:8848/n…

【MySQL】之联合索引与最左匹配原则

前言&#xff1a; 最左匹配原则在我们 MySQL 开发过程中和面试过程中经常遇到&#xff0c;为了加深印象和理解&#xff0c;我在这里把 MySQL 的最左匹配原则详细的讲解一下&#xff0c;包括它的原理以及是否导致索引失效的场景。 在讲解 MySQL 的最左匹配原则之前&#xff0c;…

管理类联考——逻辑——真题篇——按知识分类——综合推理

文章目录 2023真题(2023-29)-数量关系模型真题(2023-31-32)-综合推理-匹配-数量假言匹配模型-数量假言模型:题干数量加假言,数量关系优先算;假言命题做串联,易出矛盾和二难。真题(2023-37-38)-综合推理-数量假言匹配模型-数量假言模型:题干数量加假言,数量关系优先…

深入理解LightGBM

1. LightGBM简介 GBDT (Gradient Boosting Decision Tree) 是机器学习中一个长盛不衰的模型&#xff0c;其主要思想是利用弱分类器&#xff08;决策树&#xff09;迭代训练以得到最优模型&#xff0c;该模型具有训练效果好、不易过拟合等优点。GBDT不仅在工业界应用广泛&#…

宣布全面推出适用于 macOS 的 Amazon EC2 M2 Pro Mac 实例

即日起&#xff0c;Amazon Elastic Compute Cloud (Amazon EC2) M2 Pro Mac 实例现已全面推出 (GA)。在为 Apple 平台&#xff08;例如 iOS、macOS、iPadOS、tvOS、watchOS、visionOS 和 Safari&#xff09;构建和测试应用程序时&#xff0c;这些实例的性能比现有的 M1 Mac 实例…

http正向代理测试,nginx反向代理中转正向代理服务器

有3台服务器如下&#xff1a; 192.168.111.201&#xff08;反向代理到正向代理服务器&#xff09; 192.168.111.202&#xff08;正向代理服务器&#xff09; 192.168.111.203&#xff08;目标WEB系统&#xff09; 防火墙网络策略如图所示: 1、192.168.111.200 只能访问 192.168…

grep用法详解

grep用法详解 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 深入解析grep命令&#xff1a;轻松搜寻文本&#xff0c;提高程序猿效率 在程序猿的日常工作中&…

Python小技巧2:在同一行打印多个元素

在Python代码中&#xff0c;如果我们想要打印一条日志或者一个元素。一般会使用如下语句&#xff1a; print("this is end!") #打印字符串&#xff1a;this is end!print(i) #打印出变量i的值 而此时&#xff0c;如果想打印两个元素&#xff0c;一般来说&#xff0…