如何高效将Excel表格转换为JSON并实现网页宽高查询功能？

一、Excel转高效JSON（避免二维数组） #

目标是生成直接通过宽高键快速查询的JSON结构，而非需要遍历的二维数组，提升后续查询效率。

方式1：Excel公式手动生成（小表格适用） #

假设表格格式：第一行是宽度值（B1、C1...），第一列是高度值（A2、A3...），对应数值在交叉单元格（如B2是宽281+高210的数值）。

在空白单元格（如D2）输入公式：

="{""width"":"&B$1&", ""height"":"&$A2&", ""value"":"&B2&"}"

横向+纵向拖拽填充所有数据，将生成的所有JSON片段复制到文本编辑器，首尾添加[和]，即可得到结构化JSON数组。

方式2：Python脚本批量转换（大表格适用） #

用pandas快速处理，生成字典映射结构（查询效率最高）：

import pandas as pd
import json

# 读取Excel文件，替换为你的文件路径和表名
df = pd.read_excel("your_size_table.xlsx", sheet_name="Sheet1")

# 构建高度→宽度→数值的三层字典
size_map = {}
for _, row in df.iterrows():
    height = int(row.iloc[0])
    size_map[height] = {}
    for width_col in df.columns[1:]:
        width = int(width_col)
        size_map[height][width] = int(row[width_col])

# 保存为JSON文件
with open("size_map.json", "w", encoding="utf-8") as f:
    json.dump(size_map, f, indent=2)

生成的JSON示例：

{
  "210": {
    "281": 6,
    "282": 7
  },
  "211": {
    "281": 8
  }
}

查询时直接通过size_map[210][281]即可获取数值6，无需遍历。

二、实现宽高查询网页 #

用HTML+JavaScript实现本地查询，无需后端服务：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>宽高数值查询工具</title>
    <style>
        .wrapper {
            max-width: 450px;
            margin: 3rem auto;
            padding: 1.5rem;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .input-group {
            margin-bottom: 1.2rem;
        }
        label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        input {
            width: 100%;
            padding: 0.6rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            width: 100%;
            padding: 0.7rem;
            background-color: #2563eb;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
        }
        #output {
            margin-top: 1.5rem;
            padding: 1rem;
            background-color: #f8fafc;
            border-radius: 4px;
            min-height: 40px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <h2>宽高数值查询</h2>
        <div class="input-group">
            <label for="width-input">宽度</label>
            <input type="number" id="width-input" placeholder="请输入宽度值">
        </div>
        <div class="input-group">
            <label for="height-input">高度</label>
            <input type="number" id="height-input" placeholder="请输入高度值">
        </div>
        <button onclick="getCorrespondingValue()">查询数值</button>
        <div id="output"></div>
    </div>

    <script>
        // 加载JSON数据（将生成的size_map.json和HTML放在同一目录）
        let sizeData = {};
        fetch('size_map.json')
            .then(res => res.json())
            .then(data => {
                // 将JSON的字符串键转为数字，避免类型不匹配
                for (const hStr in data) {
                    const height = parseInt(hStr);
                    sizeData[height] = {};
                    for (const wStr in data[hStr]) {
                        const width = parseInt(wStr);
                        sizeData[height][width] = data[hStr][wStr];
                    }
                }
            })
            .catch(err => document.getElementById('output').textContent = `数据加载失败：${err.message}`);

        function getCorrespondingValue() {
            const width = parseInt(document.getElementById('width-input').value);
            const height = parseInt(document.getElementById('height-input').value);
            const outputEl = document.getElementById('output');

            if (isNaN(width) || isNaN(height)) {
                outputEl.textContent = '请输入有效的数字';
                return;
            }

            if (sizeData[height] && sizeData[height][width]) {
                outputEl.textContent = `查询结果：${sizeData[height][width]}`;
            } else {
                outputEl.textContent = '未找到该宽高组合对应的数值';
            }
        }
    </script>
</body>
</html>

使用说明： #

1. 将Python生成的size_map.json与上述HTML文件放在同一文件夹
2. 直接打开HTML文件，输入宽高即可查询对应数值

内容的提问来源于stack exchange，提问作者Muhammad Usman