如何将Excel数据导入JavaScript 替代手动录入的静态常量数据

整体分两步完成，全程不需要引入第三方框架、不需要付费转换工具，后续更新数据只需要重复1次转换操作即可。

第一步：Excel转匹配现有代码结构的JSON #

你之前Excel转JSON失败，基本都是在线转换工具无法自动匹配嵌套结构、自动转错字段类型（比如把center数组转成字符串、把数值型的zoom转成文本）导致的。用你熟悉的R语言可以100%控制输出结构，不会出现格式问题：

• 先把Excel整理成固定列结构：
  • 第一列列名设为country_key，存每个国家的键名（对应你现有代码里的australia/france这类key）
  • 后续列依次对应字段：countryName、fsnNarrative、otherNarrative、marketLink、center_lat（对应center数组第一个数值）、center_lng（对应center数组第二个数值）、zoom
• 把Excel另存为CSV格式，运行下面的R脚本直接生成标准JSON文件：

library(jsonlite)
# 替换成你自己的CSV文件路径
raw_df <- read.csv("country_source.csv", stringsAsFactors = FALSE)

# 组装成和你现有JS结构完全一致的嵌套列表
country_data <- lapply(1:nrow(raw_df), function(row_idx) {
  list(
    countryName = raw_df$countryName[row_idx],
    fsnNarrative = raw_df$fsnNarrative[row_idx],
    otherNarrative = raw_df$otherNarrative[row_idx],
    marketLink = raw_df$marketLink[row_idx],
    center = c(raw_df$center_lat[row_idx], raw_df$center_lng[row_idx]),
    zoom = as.integer(raw_df$zoom[row_idx])
  )
})
# 用第一列的国家键名给列表命名
names(country_data) <- raw_df$country_key

# 导出格式化的JSON文件到项目目录，不要加额外的JS变量前缀
write_json(country_data, "countryData.json", auto_unbox = TRUE, pretty = TRUE)

注意：导出的纯JSON文件不要手动加const xxx = 这类JS语法前缀，否则后续加载会报语法错误。

第二步：原生JS加载外部JSON文件 #

浏览器环境下原生JS不支持直接写const data = 文件路径的赋值语法（这是打包工具/Node环境的特性），两种零依赖写法可以选，都能达到接近直接赋值的使用效果：

写法1：script标签引入（最贴合你的使用习惯，推荐） #

不需要本地服务、不需要写异步逻辑，双击HTML文件就能正常运行：

1. 把上一步生成的countryData.json重命名为countryData.js，在文件最开头加一行全局变量赋值：

window.countryData = {
  // 后面保留原来JSON导出的所有内容即可
}

2. 在你的HTML文件里，在自己写的业务JS之前引入这个数据文件：

<script src="./data/countryData.js"></script>
<!-- 你自己的业务JS文件放在后面引入 -->
<script src="./js/main.js"></script>

3. 在你自己的业务JS里直接赋值使用即可，和你之前手动写常量的体验完全一致：

const countryData = window.countryData;
// 后续所有逻辑和之前完全一样，不需要改任何业务代码
console.log(countryData.australia);

写法2：fetch加载纯JSON文件（逻辑分离更干净） #

如果不想改JSON文件后缀，用现代浏览器原生支持的fetch接口加载即可，代码也非常简洁：

// 页面加载完成后拉取本地JSON
fetch('./data/countryData.json')
  .then(res => res.json())
  .then(countryData => {
    // 所有用到国家数据的业务逻辑全部写在这个回调里即可
    console.log('数据加载完成', countryData);
    // 地图初始化、数据渲染等原有逻辑直接放这里，不需要改写法
  })
  .catch(err => console.error('数据加载失败:', err))

注意：这个写法不要直接双击打开HTML文件（file://协议会触发浏览器跨域限制），本地调试用VS Code的Live Server、或者在项目目录跑python -m http.server起个静态服务访问即可。

后续更新流程 #

后续Excel里的全量数据更新后，只需要重新跑一次R脚本生成最新的JSON/JS数据文件，覆盖项目里的旧文件即可，不需要手动改任何JS业务代码。

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