h5页面excel转json

最新推荐文章于 2023-02-07 17:18:13 发布
qq_41766590
最新推荐文章于 2023-02-07 17:18:13 发布
阅读量147
点赞数
分类专栏： html 文章标签： Excel 转换 JSON 数据处理前端开发
本文链接：https://blog.csdn.net/qq_41766590/article/details/127853128
版权
html 专栏收录该内容
1 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>配置工具</title>
	<script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
	<script src="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
	<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
</head>

<body>

	<div id='div_config' style="display: block;">
		<br />
		<br />
		<br />
		<p>excel转json</p>
		<br />
		<ul id="config_ul">
		<button onclick="onConfigUpload()">转换</button>
		<button onclick="onCopyJson()">复制结果</button>
		<p id="result"></p>
		</ul>
	</div>
	

	<script>
		var configDiv = document.getElementById('div_config');
		configDiv.style.display = 'block';
		// 配置上传
		var configUl = document.getElementById('config_ul');


		var configIdx = 0;
		function onConfigAdd() {
			var br = document.createElement("div");
			br.innerHTML = "<br/>";
			configUl.appendChild(br);
			var li = document.createElement('li');
			li.setAttribute('id', 'li' + configIdx);
			var input = document.createElement('input');
			input.setAttribute('type', 'file');
			input.setAttribute('name', 'file');
			input.setAttribute('id', 'input' + configIdx);
			input.setAttribute('accept', '.json,.yml,.xlsx');
			var span = document.createElement('span');
			span.setAttribute('id', 'url' + configIdx);
			configIdx++;
			li.appendChild(input);
			li.appendChild(span);
			configUl.appendChild(li);
		}

		function onConfigUpload() {
			var fileUrl = "";
			var children = configUl.childNodes;
			for (var i = 0; i < children.length; i++) {
				if (children[i].nodeName == 'LI') {
					let child = children[i].childNodes;
					for (var j = 0; j < child.length; j++) {
						if (child[j].nodeName == 'INPUT') {
							fileUrl =  child[j].files[0];
						}
					}
				}
			}

			if(!fileUrl){
				alert("请选择文件");
				return;
			}

			var fileReader = new FileReader();
			fileReader.onload = function(ev) {
				try {
					var data = ev.target.result
					var workbook = XLSX.read(data, {
						type: 'binary'
					}) // 以二进制流方式读取得到整份excel表格对象
					var persons = []; // 存储获取到的数据
				} catch (e) {
					console.log('文件类型不正确');
					return;
				}
				// 表格的表格范围，可用于判断表头是否数量是否正确
				// 遍历每张表读取
				for (var sheet in workbook.Sheets) {
					if (workbook.Sheets.hasOwnProperty(sheet)) {
						var fromTo = {};
						fromTo.name = sheet;
						fromTo.data = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
						persons.push(fromTo);
						// break; // 如果只取第一张表，就取消注释这行
					}
				}

				//在控制台打印出来表格中的数据
				let json = {};
				let list = persons;
				for (let j = 0; j < list.length; j++) {
					let sheet = list[j];
					if (null == sheet) {
						continue;
					}
					if (sheet.name.indexOf('ignore_') === 0) {
						continue;
					}
					let childJSON = null;
					let data = sheet.data;
        			let keys = data[0];	
					if (data.length === 2) {
						console.log("sheet1.name===="+sheet.name);
						childJSON = {};
						let value = data[1];
						for (let m in value) {
							let v = value[m];
							if (v && typeof v == 'string' && v.indexOf('[') == 0) {
								v = JSON.parse(v);
							}
							childJSON[m] = v;
						}
					} else if (keys.length === 1) {
						// 纯数组
						console.log("sheet2.name===="+sheet.name);
						childJSON = [];
						for (let m = 0; m < data.length; m++) {
							let v = data[m][0];
							if (v && typeof v == 'string' && v.indexOf('[') == 0) {
								v = JSON.parse(v);
							}
							childJSON[m] = v;
						}
					} else if (data.length > 3) {
						// 大于3,是数组
						console.log("sheet3.name===="+sheet.name);
						childJSON = [];
						for (let m = 1; m < data.length; m++) {
							if (null == data[m] || '' == data[m]) {
								continue;
							}

							let dataJson = {};
							for (let n in keys) {
								let key = n;
								if (key.indexOf('.') !== -1) {
									let tempKeys = key.split('.');
									let tempJSON = dataJson;
									for (let t = 0; t < tempKeys.length - 1; t++) {
										if (null == tempJSON[tempKeys[t]]) {
											tempJSON[tempKeys[t]] = {};
										}
										tempJSON = tempJSON[tempKeys[t]];
									}
									tempJSON[tempKeys[tempKeys.length - 1]] = data[m][n];
								} else {
									let v = data[m][n];
									if (v && typeof v == 'string' && v.indexOf('[') == 0) {
										v = JSON.parse(v);
									}
									dataJson[key] = v;
								}
							}
							childJSON.push(dataJson);
						}
					}
					
					if (null == childJSON) {
						continue;
					}
					
					if (sheet.name.toLowerCase().indexOf('sheet') !== -1) {
						if (list.length === 1) {
							json = childJSON;
						} else {
							Object.assign(json, childJSON);
						}
					} else {
						json[sheet.name] = childJSON;
					}
				}
				console.log(json);
				json = [{level:json}];
				copy = JSON.stringify(json);
				formatEllipsis(copy);
			// 	$("#area").val(JSON.stringify(persons));
			};
			// 以二进制方式打开文件
			fileReader.readAsBinaryString(fileUrl);
		}

		function formatEllipsis(str = '', limitLen = 24) {
			let 
			len = 0,
			reg = /[\x00-\xff]/, //半角字符的正则匹配
			strs = str.split(''),
			inx = strs.findIndex(s => {
				len += reg.test(s) ? 1 : 2
				if (len > limitLen) return true
			})
			let result = inx === -1 ? str : str.substr(0, inx) + '...'
			document.getElementById("result").innerHTML= '转换结果：' +  result;
		}

		var copy = null;
		function onCopyJson(e) {
			if(!copy){
				alert("请先转换，在进行复制");
				return;
			}
			// 动态创建 input 元素
			var aux = document.createElement("input");
			// 获得需要复制的内容
			aux.setAttribute("value", copy);
			// 添加到 DOM 元素中
			document.body.appendChild(aux);
			// 执行选中
			// 注意: 只有 input 和 textarea 可以执行 select() 方法.
			aux.select();
			// 获得选中的内容
			var content = window.getSelection().toString();
			// 执行复制命令
			document.execCommand("copy");
			// 将 input 元素移除
			document.body.removeChild(aux);
		}


		onConfigAdd();

	</script>
</body>

</html>