h5页面excel转json

<!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.resultvar 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 : 2if (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>

h5页面excel转json相关推荐

h5引入json_H5页面内使用JSON动画
问题背景有一天我们的UI设计师找到我说,要把页面中我自己用程序写的动画,换成他们给的json动画,原因是有的动画很复杂,自己写起来达不到他们的预期效果(写到这里我突然想到一个问题,这么复杂的动画为什 ...
如何搭积木式的快速开发H5页面?
2个月前开源的H5编辑器 H5-Dooring 目前已经成功迭代到1.0版本, 从最开始的基本的页面生成框架到现在的支持更丰富的组件资源,交互能力和数据追踪能力, 期间做了很多的设计和迭代,也收获了很 ...
h5页面如何预览excel文件_如何使用JavaScript实现前端导入和导出excel文件?(H5编辑器实战复盘)...
前言最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...
移动端H5页面编辑器开发实战--原理结构篇
一.前言在去年10月份左右,接到了需求:开发一个H5移动端页面编辑器的任务,目的主要是解放公司内在制作这类网页的所投入的人力以及解决使用外部H5编辑器所涉及到的版权问题. 因此,一款能够与市面上已经 ...
threejs模型可视化编辑器_加油！所见即所得的H5页面可视化编辑器H5-Dooring
最近总结一下笔者目前开发的h5在线编辑器H5-Dooring. 目前已经在github上开源免费使用. 目前市面上也有很多优秀的H5在线编辑器, 也很强大, 笔者将从几个维度来介绍H5-Dooring ...
Excel转Json
参考: Excel2JSON Excel转JSON Excel另存为JSON的技巧 (office的插件) excel2json 游戏程序员的自我修养 (其他人写的工具) Excel转JSON格式- ...
进一步封装axios并调用其读取数据（吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持，在这两种情况下的系统只能使用ajax或者原生js请求后台数据）
注意!!!(修改于2020年7月18日) 在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据报错截图如下报错内容: {&quo ...
react native利用webvView嵌入h5页面以及RN与webView的通信
前言:这边主要是记录下,在react native中如何使用h5页面,以及h5页面发生点击,或者跳转到react native时,如何与react native进行通信. 一.react native ...
C#开发微信门户及应用(44)--微信H5页面开发的经验总结
在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...

h5页面excel转json

h5页面excel转json相关推荐

最新文章

热门文章