使用js将json数据导出excel(xls、xlsx、csv),并过滤掉不需要的数据

本文介绍了如何使用JavaScript将带有过滤条件的JSON数据导出为Excel文件,包括xls、xlsx和csv格式。重点讲解了xlsx格式的导出,利用js-xlsx库实现真实Excel文件的创建,并提供了npm安装和使用方法。
摘要由CSDN通过智能技术生成

首先看一下json数据的格式,这是其中一条的格式我们只需要label中的值和value中的值导出到excel中

[{
	"type": "text",
	"required": true,
	"label": "姓名",
	"className": "form-control",
	"name": "text-1553770509298",
	"value": "xx",
	"subtype": "text"
}, {
	"type": "text",
	"required": true,
	"label": "学号",
	"className": "form-control",
	"name": "text-1553770509302",
	"value": "1e32ed",
	"subtype": "text"
}, {
	"type": "radio-group",
	"required": true,
	"label": "性别",
	"name": "radio-group-1553770509306",
	"values": [{
		"label": "男",
		"value": "1",
		"selected": true
	}, {
		"label": "女",
		"value": "1"
	}]
}, {
	"type": "number",
	"required": true,
	"label": "年龄",
	"className": "form-control",
	"name": "number-1553770509315",
	"value": "21"
}, {
	"type": "date",
	"required": true,
	"label": "出生年月日",
	"className": "form-control",
	"name": "date-1553770509319",
	"value": "2019-03-01"
}, {
	"type": "text",
	"required": true,
	"label": "籍贯",
	"className": "form-control",
	"name": "text-1553770509322",
	"value": "fsd",
	"subtype": "text"
}, {
	"type": "text",
	"required": true,
	"label": "班级",
	"className": "form-control",
	"name": "text-1553770509327",
	"value": "fewf",
	"subtype": "text"
}, {
	"type": "select",
	"required": true,
	"label": "政治面貌",
	"className": "form-control",
	"name": "select-1553770509330",
	"values": [{
		"label": "党员",
		"value": "option-2"
	}, {
		"label": "团员",
		"value": "option-3",
		"selected": true
	}, {
		"label": "群众",
		"value": "option-3"
	}]
}]

 效果图

在开始之前先看下几个excel格式的区别吧

在导出excel的时候有三种格式,应该选哪种格式呢这就看项目需求了,下面说说三个格式的区别

  1. 如果后缀是xls,在2007版本之后的office打开会有提示(xls在wps上打开没有提示)
  2. 如果后缀是xlsx 在2007版本之后的打开没提示但是在2007之前的版本会打不开。
  3. csv是最通用的一种文件格式,它可以非常容易地被导入各种PC表格及数据库中。 此文件,一行即为数据表的一行。生成数据表字段用半角逗号隔开。但是csv不能设置样式。

 首先导出xls格式

export function JSONToExcelConvertor(JSONData, FileName, title, filter, r
  • 2
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值