<!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>
h5页面excel转json
最新推荐文章于 2023-03-19 21:13:44 发布