如何在HTML网页中提取Excel数据并实现国家信息联动展示
2026-5-9
嘿，这个需求其实挺实用的，我来一步步给你拆解怎么实现：
第一步：把Excel里的国家数据转换成网页能处理的格式
Excel里的结构化数据没法直接给HTML用，得先转成JSON格式（这是前端最常用的结构化数据格式）。这里给你几个简单的方法：
方法1：手动转（小数据量推荐）
如果你的国家数据不多，直接把Excel里的每行数据写成JSON对象就行。比如Excel里一行是「中国、北京、人民币、...」，转成JSON就是：
{"country":"中国","capital":"北京","currency":"人民币","area":"约960万平方公里","population":"约14.1亿","premier":"李强","president":"习近平"}
把所有国家的对象放到一个数组里，就成了完整的数据源。
方法2：用Python自动转（大数据量推荐）
如果数据很多，手动写太麻烦，用Python的pandas库一键转换：
- 先安装依赖：
pip install pandas openpyxl（openpyxl是读取Excel的必要依赖） - 运行下面的脚本：
import pandas as pd # 替换成你的Excel文件名 df = pd.read_excel('国家数据.xlsx') # 导出成JSON数组格式，force_ascii=False保留中文 df.to_json('countries.json', orient='records', force_ascii=False)
运行完会生成一个countries.json文件，直接就能给前端用了。
方法3：Excel公式辅助转
不想写代码的话，也可以用Excel公式批量生成JSON片段。比如在空白列（比如H列）的H2单元格输入：
="{""country"":"""&A2&""",""capital"":"""&B2&""",""currency"":"""&C2&""",""area"":"""&D2&""",""population"":"""&E2&""",""premier"":"""&F2&""",""president"":"""&G2&"""},"
然后下拉填充所有行，把生成的内容复制出来，去掉最后一个逗号，再包裹上[]，就是完整的JSON数组了。
第二步：用HTML+JavaScript实现下拉选择和信息展示
接下来写网页代码，核心逻辑是：加载数据 → 生成下拉选项 → 监听选择事件 → 展示对应信息。
完整代码示例
<!DOCTYPE html> <html> <head> <title>国家信息查询工具</title> <style> .container { max-width: 600px; margin: 20px auto; padding: 0 20px; } .info-group { margin: 15px 0; } .info-label { font-weight: bold; display: inline-block; width: 80px; } #country-select { padding: 5px; min-width: 200px; } </style> </head> <body> <div class="container"> <h1>国家信息查询</h1> <div class="info-group"> <label class="info-label" for="country-select">选择国家：</label> <select id="country-select"> <option value="">请选择一个国家</option> </select> </div> <div class="info-group"> <span class="info-label">首都：</span> <span id="capital">-</span> </div> <div class="info-group"> <span class="info-label">货币：</span> <span id="currency">-</span> </div> <div class="info-group"> <span class="info-label">面积：</span> <span id="area">-</span> </div> <div class="info-group"> <span class="info-label">人口：</span> <span id="population">-</span> </div> <div class="info-group"> <span class="info-label">总理：</span> <span id="premier">-</span> </div> <div class="info-group"> <span class="info-label">总统：</span> <span id="president">-</span> </div> </div> <script> // 方法1：加载外部JSON文件（推荐，数据和代码分离） let countryData = []; fetch('countries.json') .then(response => response.json()) .then(data => { countryData = data; renderCountryOptions(); }) .catch(err => console.log('加载数据出错啦:', err)); // 方法2：直接写JSON数据（小数据量用），注释掉上面的fetch代码即可 /* const countryData = [ {"country":"中国","capital":"北京","currency":"人民币","area":"约960万平方公里","population":"约14.1亿","premier":"李强","president":"习近平"}, {"country":"美国","capital":"华盛顿哥伦比亚特区","currency":"美元","area":"约937万平方公里","population":"约3.33亿","premier":"无","president":"拜登"}, // 更多国家数据... ]; renderCountryOptions(); */ // 获取DOM元素 const countrySelect = document.getElementById('country-select'); const capitalEl = document.getElementById('capital'); const currencyEl = document.getElementById('currency'); const areaEl = document.getElementById('area'); const populationEl = document.getElementById('population'); const premierEl = document.getElementById('premier'); const presidentEl = document.getElementById('president'); // 动态生成下拉选项 function renderCountryOptions() { countryData.forEach(country => { const option = document.createElement('option'); option.value = country.country; option.textContent = country.country; countrySelect.appendChild(option); }); } // 监听下拉选择变化 countrySelect.addEventListener('change', function() { const selectedName = this.value; if (!selectedName) { resetInfo(); return; } // 匹配选中的国家数据 const selectedCountry = countryData.find(item => item.country === selectedName); if (selectedCountry) { // 填充信息，处理空值 capitalEl.textContent = selectedCountry.capital || '无'; currencyEl.textContent = selectedCountry.currency || '无'; areaEl.textContent = selectedCountry.area || '无'; populationEl.textContent = selectedCountry.population || '无'; premierEl.textContent = selectedCountry.premier || '无'; presidentEl.textContent = selectedCountry.president || '无'; } else { resetInfo(); } }); // 重置显示信息 function resetInfo() { capitalEl.textContent = '-'; currencyEl.textContent = '-'; areaEl.textContent = '-'; populationEl.textContent = '-'; premierEl.textContent = '-'; presidentEl.textContent = '-'; } </script> </body> </html>
代码说明
- HTML部分：做了简单的响应式布局，用
container限制宽度，info-group分组展示信息，看起来更整洁。 - JavaScript部分：
- 提供两种数据加载方式：要么加载外部JSON文件（方便后续更新数据），要么直接把JSON写在代码里（小数据量快速实现）。
renderCountryOptions函数自动生成下拉选项，不用手动写每个<option>标签。- 监听下拉框的
change事件，每次选择变化时自动匹配对应国家的数据，并填充到展示区域。 - 处理了空值情况，如果某个字段没有数据（比如美国没有总理），会显示「无」。
额外提示
- 如果数据需要频繁更新，优先用外部JSON文件的方式，修改数据时只需要编辑
countries.json，不用动HTML/JS代码。 - 要是你不想提前转JSON，也可以用前端库直接读取Excel文件（比如SheetJS），但需要用户上传文件，不如提前转JSON方便。
内容的提问来源于stack exchange，提问作者Joydeep Dan
