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

news/2024/7/21 6:36:49 标签: uni-app, vue.js, excel, SheetJS

SheetJSexcel_0">uniapp和vue如何使用SheetJS导出excel

SheetJS中文文档详解

SheetJS_4">一、SheetJS是什么

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

SheetJS_9">二、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_26">三、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_49">附:导出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_79">四、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.niftyadmin.cn/n/5266141.html

相关文章

米贸搜|Facebook 广告投放中什么会影响千次展示费用

fb投放千展高怎么办 1、广告投放的国家 比如像欧美国家&#xff0c;相对其他国家千展本身就会高一点&#xff0c;像南美、东南亚这些稍微落后一点的国家千展就会相对低一点。 2、广告素材本身 这个就是比如一套全新的素材上传至fb&#xff0c;理论上来说千展会相对低一点&…

YOLOv8 图片目标计数 | 特定目标进行计数

全类别计数特定类别计数如何使用 YOLOv8 进行对象计数 有很多同学留言说想学 YOLOv8 目标计数。那么今天这篇博客,我将教大家如何使用 YOLOv8 进行对象计数。YOLOv8 是一种非常强大的对象检测模型,它可以识别图像中的各种对象。我们将学习如何利用这个模型对特定对象进行计数…

centos网卡重命名方法

centos网卡重命名 centos7以后网卡命名采用一致性网络设备命名&#xff08;Consistent Network Device Naming&#xff09;&#xff0c;不再是eth0,eth1这种简单的命名。在某些场景下简单的网卡名称能让事情更简单&#xff0c;下面是几种网卡改名的方案。 方法1&#xff1a;利…

自动驾驶技术:驶向未来的智能之路

导言 自动驾驶技术正引领着汽车产业向着更安全、高效、智能的未来演进。本文将深入研究自动驾驶技术的核心原理、关键技术、应用场景以及对交通、社会的深远影响。 1. 简介 自动驾驶技术是基于先进传感器、计算机视觉、机器学习等技术的创新&#xff0c;旨在实现汽车在不需要人…

「构」向云端 - 我与 2023 亚马逊云科技 re:Invent 大会

授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 亚马逊云科技开发者社区, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道 2023年亚马逊AWS re:Invent大会宣布一项Amazon Q的创新项目&#x…

2415. 反转二叉树的奇数层 --力扣 --JAVA

题目 给你一棵 完美 二叉树的根节点 root &#xff0c;请你反转这棵树中每个 奇数 层的节点值。 例如&#xff0c;假设第 3 层的节点值是 [2,1,3,4,7,11,29,18] &#xff0c;那么反转后它应该变成 [18,29,11,7,4,3,1,2] 。 反转后&#xff0c;返回树的根节点。 完美 二叉树需满…

cat EOF快速创建一个文件,并写入内容

在linux系统中&#xff0c;如果你有这个需求 vi一个文件 /etc/docker/daemon.json 在这个文件中写入内容 { "registry-mirrors": ["https://iw3lcsa3.mirror.aliyuncs.com","http://10.1.8.151:8082"],"insecure-registries":[&quo…

qt 5.15.2连接postgresql9.4数据库功能

qt 5.15.2连接postgresql9.4数据库功能 执行后显示效果&#xff1a; "QSQLITE" "QODBC" "QODBC3" "QPSQL" "QPSQL7" connected success to postgresql9.4 "admin" "1"注意事项: 连接postgresql9.4…