【单机离线版】excel转json软件，纯HTML+JS零依赖实现Excel转JSON工具，一个index.html搞定所有转换！

【单机离线版】excel转json软件，纯HTML+JS零依赖实现Excel转JSON工具，一个index.html搞定所有转换！

导语 ：还在为安装Python环境、pip install xlrd 报兼容性错误而烦恼吗？本文将带你用纯HTML+JS打造一个零依赖、开箱即用的Excel转JSON工具，支持拖拽上传、一键下载、复制剪贴板，一个 index.html 文件即可运行，任何操作系统都能用！

---

软件下载链接：(https://download.csdn.net/download/qq616491978/92928472

目录

• 一、背景与需求
• 二、功能概览
• 三、技术选型与架构
• 四、核心源码逐段解析
  • [4.1 CSS 变量设计系统](#4.1 CSS 变量设计系统)
  • [4.2 文件上传模块（拖拽 + 点击）](#4.2 文件上传模块（拖拽 + 点击）)
  • [4.3 核心转换引擎 ------ 还原Python版逻辑](#4.3 核心转换引擎 —— 还原Python版逻辑)
  • [4.4 下载与剪贴板功能](#4.4 下载与剪贴板功能)
• 五、与Python版转换逻辑的精确对照
• 六、完整源码获取
• 七、使用方式
• 八、总结

---

一、背景与需求

在实际开发中，我们经常需要将运营或产品提供的 Excel 表格数据转换为 JSON 格式，供前端或后端程序使用。之前用 Python + xlrd2 + tkinter 写过一个桌面版小工具，但它有几个痛点：

• 环境依赖重 ：新电脑需要安装 Python 解释器、pip install 第三方库
• 兼容问题 ：xlrd2 在新版本中不再支持 .xlsx 格式，容易报错
• 不便分享 ：需要打包成 .exe 或安装 Python 环境才能运行

于是决定用 纯 HTML + JavaScript 重写，借助 SheetJS（社区版免费）CDN 读取 Excel，实现一个 零依赖、跨平台、即开即用 的 Web 版工具。

---

二、功能概览

功能	说明
📂 文件选择	支持拖拽上传 和点击选择 ，校验 .xlsx / .xls 格式
🔄 核心转换	读取第一个工作表，第1行为表头，第1列为JSON外层key
🧠 智能类型处理	float→int、JSON字符串自动解析、空值/Date/布尔兼容
📝 结果预览	深色代码编辑器风格文本区，实时展示转换结果
💾 下载.js文件	文件名自动匹配原Excel文件名，编码UTF-8
📋 一键复制	支持 navigator.clipboard API，带降级方案
⚡ 快捷键	Ctrl+Enter 开始转换，Ctrl+S 下载结果
📱 响应式布局	适配PC和移动端
🎨 美化的UI	CSS Variables 设计系统，状态指示动画

---

三、技术选型与架构

技术栈：
  ├── HTML5           → 页面结构
  ├── CSS3            → 样式与动画（CSS Variables + Flexbox）
  ├── 原生 JavaScript  → 所有逻辑（无框架依赖）
  └── SheetJS (CDN)   → Excel文件解析

数据流：
  用户选择文件 → FileReader读取为ArrayBuffer
  → XLSX.read() 解析工作簿 → sheet_to_json() 转二维数组
  → 逐行逐列遍历 + TransformationType 类型转换
  → JSON.stringify() 格式化 → 展示 + 下载

为什么选 SheetJS（xlsx）？

• 社区版免费，CDN 引入即可，零配置
• 同时支持 .xlsx（Office 2007+）和 .xls（Office 97-2003）
• API 简洁，XLSX.read() + sheet_to_json() 两行搞定

---

四、核心源码逐段解析

4.1 CSS 变量设计系统

通过 :root 定义全局 CSS 变量，统一设计语言，方便后期换肤：

:root {
    --primary: #4F46E5;          /* 主色调 - 靛蓝 */
    --primary-hover: #4338CA;
    --success: #059669;          /* 成功状态 - 翠绿 */
    --danger: #DC2626;           /* 错误状态 - 红色 */
    --bg: #F8FAFC;               /* 页面背景 */
    --card-bg: #FFFFFF;          /* 卡片背景 */
    --border: #E2E8F0;
    --text: #1E293B;
    --text-secondary: #64748B;
    --shadow: 0 1px 3px 0 rgba(0,0,0,0.1);       /* 默认阴影 */
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1); /* Hover阴影 */
    --radius: 12px;
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

设计要点 ：使用 cubic-bezier(0.4, 0, 0.2, 1) 缓动函数（Material Design 标准缓出曲线），按钮 hover 时有轻微上浮 + 阴影扩散效果，交互感更强。

---

4.2 文件上传模块（拖拽 + 点击）

// 点击上传区 → 触发隐藏的 <input type="file">
uploadZone.addEventListener('click', function(e) {
    if (e.target !== removeFileBtn) {
        fileInput.click();
    }
});

// 拖拽事件：阻止浏览器默认打开文件行为
uploadZone.addEventListener('dragover', function(e) {
    e.preventDefault();
    e.stopPropagation();
    uploadZone.classList.add('drag-over');      // 高亮边框
});

uploadZone.addEventListener('drop', function(e) {
    e.preventDefault();
    e.stopPropagation();
    uploadZone.classList.remove('drag-over');
    if (e.dataTransfer.files.length > 0) {
        selectFile(e.dataTransfer.files[0]);     // 取第一个文件
    }
});

文件校验逻辑：

function selectFile(file) {
    const ext = file.name.split('.').pop().toLowerCase();
    if (ext !== 'xlsx' && ext !== 'xls') {
        showToast('❌ 请选择 .xlsx 或 .xls 格式的 Excel 文件');
        return;
    }
    selectedFile = file;
    currentFileName = file.name.replace(/\.(xlsx|xls)$/i, '');  // 去掉扩展名
    // ... 更新UI状态
}

技巧 ：提前去掉扩展名存入 currentFileName，后续下载时直接拼接 .js 即可，无需再次处理。

---

4.3 核心转换引擎 ------ 还原Python版逻辑

这是整个工具的灵魂，完全复刻了 Python 版 excel2json.py 的转换规则：

4.3.1 TransformationType ------ 数据类型规范化

Python 版用 xlrd 读取 Excel 时，所有数字都是 float 类型。所以原代码中有一个 TransformationType 函数将 float 转 int：

# === 原Python逻辑 ===
def TransformationType(var):
    if isinstance(var, float):
        str1 = int(var)      # 1.0 → 1
    elif isinstance(var, str):
        str1 = var           # 字符串保持原样
    else:
        raise Exception("type is not deal")
    return str1

JS 版对应实现，并增加了对 boolean、Date、null/undefined 的兼容处理：

function transformationType(value) {
    if (typeof value === 'number') {
        // 整数型浮点数 → 整数（如 1.0 → 1）
        if (Number.isFinite(value) && value % 1 === 0) {
            return Math.trunc(value);
        }
        return value;                    // 真正的小数保留
    }
    if (typeof value === 'string')  return value;
    if (typeof value === 'boolean') return value;
    if (value === undefined || value === null) return '';
    if (value instanceof Date) {
        return value.toISOString().split('T')[0];  // 日期 → "YYYY-MM-DD"
    }
    return String(value);
}

4.3.2 isJsonString ------ 智能JSON检测

Python 版用 eval() 检测字符串是否为合法JSON，存在安全风险。JS 版改用更安全的 JSON.parse()：

# === 原Python逻辑（潜在安全风险） ===
def isJsonString(str):
    try:
        eval(str)
    except:
        return False
    return True

// === JS版（安全替代方案） ===
function isJsonString(str) {
    if (typeof str !== 'string') return false;
    const trimmed = str.trim();
    // 仅对看起来像JSON的字符串尝试解析
    if (!trimmed.startsWith('{') && !trimmed.startsWith('[')) {
        return false;
    }
    try {
        JSON.parse(trimmed);
        return true;
    } catch (e) {
        return false;
    }
}

为什么不用 eval() ：浏览器的 eval() 会执行任意 JavaScript 代码，如果 Excel 单元格内容包含恶意脚本将造成安全风险。JSON.parse() 仅解析纯 JSON 数据结构，更安全。

4.3.3 readExcel ------ 主转换函数

function readExcel(workbook) {
    // 1️⃣ 取第一个工作表
    const firstSheetName = workbook.SheetNames[0];
    const sheet = workbook.Sheets[firstSheetName];

    // 2️⃣ 转二维数组（raw: true = 原始值，保留数字类型）
    const sheetData = XLSX.utils.sheet_to_json(sheet, {
        header: 1,       // 返回二维数组而非对象数组
        defval: '',      // 空单元格默认值
        raw: true        // 保留原始类型（数字就是number，不转字符串）
    });

    if (sheetData.length < 2) {
        throw new Error('Excel需要至少包含表头行和一行数据');
    }

    const headers = sheetData[0];                      // 第0行 = 表头
    const adict = {};                                   // 外层字典

    // 3️⃣ 遍历数据行（从第1行开始）
    for (let i = 1; i < sheetData.length; i++) {
        const row = sheetData[i];

        // 跳过完全空行
        if (row.every(c => c === '' || c == null)) continue;

        const dataObj = {};                              // 内层数据对象

        // 4️⃣ 遍历每一列
        for (let j = 0; j < headers.length; j++) {
            let rawValue = (j < row.length) ? row[j] : '';
            const headerKey = transformationType(headers[j]);
            let value = transformationType(rawValue);

            // JSON字符串 → 自动解析为对象/数组
            if (typeof value === 'string' && isJsonString(value)) {
                dataObj[headerKey] = evalJsonString(value);
            } else {
                dataObj[headerKey] = value;
            }
        }

        // 5️⃣ 第一列值作为外层key
        const outerKey = transformationType(sheetData[i][0]);
        adict[String(outerKey)] = dataObj;
    }
    return adict;
}

关键参数说明：

参数	值	作用
header	1	返回二维数组 [[row0], [row1], ...]，而非默认的对象数组
defval	''	空单元格返回空字符串而非 undefined
raw	true	保留原始数据类型，数字不转为格式化字符串

---

4.4 下载与剪贴板功能

下载 .js 文件（Blob + URL.createObjectURL 方案）：

downloadBtn.addEventListener('click', function() {
    const blob = new Blob([convertedJsString], {
        type: 'application/javascript;charset=utf-8'
    });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = currentFileName + '.js';   // 自动匹配原Excel文件名
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);               // 释放内存
});

复制到剪贴板（Clipboard API + 降级方案）：

copyBtn.addEventListener('click', function() {
    // 优先使用现代API
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(convertedJsString)
            .then(() => showToast('📋 已复制到剪贴板！'))
            .catch(() => fallbackCopy());
    } else {
        fallbackCopy();  // 降级：选中textarea + execCommand
    }
});

function fallbackCopy() {
    outputArea.select();
    outputArea.setSelectionRange(0, 999999);
    document.execCommand('copy');
}

---

五、与Python版转换逻辑的精确对照

下面用一张表格说明 JS 版如何 1:1 还原 Python 版的核心逻辑：

步骤	Python (excel2json.py)	JavaScript (index.html)
读取Excel	xlrd2.open_workbook(path)	XLSX.read(data, {type:'array'})
取第一个sheet	workbook.sheet_names()[0]	workbook.SheetNames[0]
转二维数组	sheet.cell_value(i, j) 逐一读取	sheet_to_json({header:1, raw:true})
表头行	sheet.cell_value(0, j)	sheetData[0][j]
float→int	int(var)	Math.trunc(value) (仅当 value%1===0)
JSON检测	eval(str) + try/except	JSON.parse(str) + try/catch
外层key	sheet.cell_value(i, 0) 转 int	String(transformationType(sheetData[i][0]))
输出格式	"data = " + json.dumps(...)	'data = ' + JSON.stringify(..., null, 1)
文件编码	open(path, 'w', encoding='utf-8')	Blob + charset=utf-8

额外优化：

• Python版将 adict[key] = data 放在内层循环中（每次覆盖，效率低），JS版将其移至内层循环之后执行，逻辑更清晰
• 增加了空行跳过、表头完整性校验等防御性编程

---

六、完整源码获取

完整源码已开源，复制以下代码保存为 index.html，浏览器直接打开即可使用：

---

七、使用方式

方式一：本地直接打开

1. 复制上述完整源码
2. 保存为 index.html
3. 双击用浏览器打开
4. 拖入或选择 .xlsx / .xls 文件
5. 点击「开始转换」→ 查看结果 → 下载 .js 文件

方式二：部署到服务器

直接放到 Nginx / Apache / Github Pages 等任何静态服务器下即可，无需构建步骤。

快捷键速查：

快捷键	功能
Ctrl + Enter	开始转换
Ctrl + S	下载 .js 文件

---

八、总结

本文从零实现了一个纯 HTML+JS 的 Excel 转 JSON 工具，核心亮点总结：

1. 零依赖：仅引用 SheetJS CDN，无需 npm install、无需 Python 环境
2. 跨平台：Windows / Mac / Linux 只要有浏览器就能用
3. 精确还原 ：1:1 复刻 Python 版的 TransformationType、isJsonString、输出格式等逻辑
4. 安全升级 ：用 JSON.parse 替代 eval，避免 XSS 风险
5. 体验优化：拖拽上传、Toast 提示、响应式布局、键盘快捷键

---

软件下载链接：(https://download.csdn.net/download/qq616491978/92928472

如果这篇文章对你有帮助，欢迎点赞、收藏、关注！

有任何问题欢迎在评论区交流讨论 🚀