<!DOCTYPE html> <html lang="zh-CN">
<head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Excel 转 JSON 转换器</title> <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script> <style> body { font-family: Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px; line-height: 1.6; }
h1 {
color: #333;
text-align: center;
}
.container {
background-color: #f9f9f9;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.input-section,
.output-section {
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 300px;
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px;
font-family: monospace;
resize: vertical;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
button:hover {
background-color: #45a049;
}
.download-btn {
background-color: #2196F3;
}
.download-btn:hover {
background-color: #0b7dda;
}
.file-input {
margin-bottom: 15px;
}
.instructions {
background-color: #e7f3fe;
border-left: 6px solid #2196F3;
padding: 10px 15px;
margin-bottom: 20px;
}
</style>
</head>
<body>
Excel 转 JSON 转换器
使用说明：
- 上传Excel文件或粘贴Excel数据
- 点击"转换为JSON"按钮
- 查看并下载转换后的JSON文件
支持将Excel中的多个工作表转换为嵌套的JSON结构。
上传Excel文件
<input type="file" id="excelFile" class="file-input" accept=".xlsx, .xls, .csv" />
或粘贴Excel数据 (CSV格式)
<textarea id="csvInput" placeholder="粘贴CSV格式的Excel数据（包含表头）..."></textarea>
<button id="convertBtn">转换为JSON</button>
JSON输出
<textarea id="jsonOutput" readonly placeholder="转换后的JSON将显示在这里..."></textarea>
<button id="downloadBtn" class="download-btn" disabled>下载JSON文件</button>
<script>
document.getElementById('convertBtn').addEventListener('click', convertToJson);
document.getElementById('downloadBtn').addEventListener('click', downloadJson);
document.getElementById('excelFile').addEventListener('change', handleFileUpload);
function handleFileUpload(event) {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function (e) {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, { type: 'array' });
// 将整个工作簿转换为JSON
const result = {};
workbook.SheetNames.forEach(sheetName => {
const worksheet = workbook.Sheets[sheetName];
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
console.log(sheetName)
if (sheetName == "基础数据") {
result[sheetName] = processSheetData(jsonData);
}
// else if (sheetName == "能力") {
// result[sheetName] = processSheetData2(jsonData);
// }
});
// 显示JSON结果
document.getElementById('jsonOutput').value = JSON.stringify(result, null, 2);
document.getElementById('downloadBtn').disabled = false;
};
reader.readAsArrayBuffer(file);
}
function convertToJson() {
const csvInput = document.getElementById('csvInput').value.trim();
if (!csvInput) {
alert('请输入或粘贴CSV格式的Excel数据');
return;
}
try {
// 创建一个临时工作簿
const workbook = XLSX.read(csvInput, { type: 'string' });
// 模拟多工作表结构
const result = {
"基础数据": processSheetData(XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], { header: 1 }))
};
// 显示JSON结果
document.getElementById('jsonOutput').value = JSON.stringify(result, null, 2);
document.getElementById('downloadBtn').disabled = false;
} catch (error) {
alert('转换失败: ' + error.message);
console.error(error);
}
}
// 处理Excel表格数据，转换为更结构化的JSON
function processSheetData(sheetData) {
if (!sheetData || sheetData.length === 0) return [];
const headers = sheetData[0];
const levelMap = {};
// 从第二行开始处理数据（第一行是表头）
for (let i = 1; i < sheetData.length; i++) {
const row = sheetData[i];
const level = row[0].toString(); // 第一列是等级
const hp = row[1]; // 第二列是生命值
const attack = row[2]; // 第三列是攻击力
const defense = row[3]; // 第四列是防御值
if (level && !isNaN(hp) && !isNaN(attack) && !isNaN(defense)) {
levelMap[level] = {
hp: hp,
attack: attack,
defense: defense
};
}
}
return levelMap;
}
function processSheetData2(sheetData) {
const abilities = [];
let currentAbility = null;
if (!sheetData || sheetData.length === 0) return [];
const headers = sheetData[0];
console.log(sheetData)
// 从第二行开始处理数据（第一行是表头）
for (let i = 1; i < sheetData.length; i++) {
const row = sheetData[i];
currentAbility = {
effect: row[0],
name: row[1],
levels: []
};
this.levelDeal(row)
}
// const row = sheetData[i];
// abilities.push(currentAbility);
// currentAbility = {
// type: row[0],
// name: row[1],
// description: row[2],
// levels: []
// };
// const levelData = {
// level: row[3],
// params: row.slice(4, 14) // 获取1-10级的参数
// };
// currentAbility.levels.push(levelData);
// if (currentAbility) {
// abilities.push(currentAbility);
// }
// }
// return {
// abilities: abilities
// };
}
function levelDeal(data){
let levels = null;
}
function downloadJson() {
const jsonOutput = document.getElementById('jsonOutput').value;
if (!jsonOutput) {
alert('没有JSON数据可下载');
return;
}
const blob = new Blob([jsonOutput], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = '转换后数据.json';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
</script>
</body>
</html>