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

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

SheetJS中文文档详解

一、SheetJS是什么

SheetJS是一款适用于浏览器和Node.js的开源电子表格解析库。

与其他电子表格解析库相比,SheetJS拥有强大的电子表格解析功能,即使电子表格很大,也可以轻松处理。

同时,SheetJS支持大量的电子表格格式,如Excel、CSV、OpenDocument等。

二、SheetJS的安装

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

通过npm安装SheetJS:

sh 复制代码
npm install xlsx

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

js 复制代码
<!--使用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表格中的示例:

js 复制代码
/* 生成数据 */
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数据转换,以下是博主写的转换方法:

js 复制代码
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方法:

js 复制代码
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 //生成公式列表(具有值回退)。
相关推荐
程序员清风1 天前
CSV、Excel 与数据库数据读取实践
数据库·oracle·excel
泡海椒1 天前
JQuick-Excel JContext 与 trans 实战:将字典值带入行转换
excel
大纽耶耶1 天前
我把 YOLO 训练做成了网页版:需求设计与技术选型
vue.js
大纽耶耶1 天前
开发 YOLO 训练管理平台的 23 个实践教训
vue.js
Maynor在掘金1 天前
1.9 万 Star 的 Hypit:让 AI Agent 帮你“一键复刻”爆款视频,保姆级上手教程
vue.js·github
ym hyd 1111 天前
门诊挂号系统源码 Java+SpringBoot+Vue3 前后分离
java·vue.js·spring boot·毕设
斯内普吖1 天前
(开源)宠物饲养系统实战指南 基于 Java + SSM + Vue + MySQL
java·vue.js·mysql·开源·宠物
可乐鸡翅yeah_1 天前
新手梳理:HLS 线上问题,哪些该提给 CDN,哪些该找后端切片服务
开发语言·前端·javascript·vue.js·网络协议·http·m3u8在线
Q26433650231 天前
【有源码】基于SpringBoot+Vue的博物馆展览与服务一体化平台-java博物馆数字化展品展示与交互平台设计
java·vue.js·spring boot·spring·毕业设计·javaweb·课程设计
ym hyd 1111 天前
汽车零部件缺陷管理系统源码 Java+SpringBoot+Vue3 前后分离
java·vue.js·spring boot·汽车·毕设