背景与挑战

在前端开发中，我们经常需要处理大量结构化数据。手动将这些数据硬编码到javascript文件中，如以下示例所示，不仅效率低下，而且难以维护和扩展，尤其当数据来源于外部文件（如excel电子表格）时。

const countryData = {
    australia: {
        countryName: "Australia",
        fsnNarrative: "aus fsn lorem ipsum dolor sit amet",
        otherNarrative: "lorem ipsum dolor",
        marketLink: "http://www.google.com",
        center: [65, 34],
        zoom: 4
    },
    france: {
        countryName: "France",
        fsnNarrative: "bgd fsn lorem ipsum dolor sit amet",
        otherNarrative: "lorem ipsum dolor",
        marketLink: "http://www.youtube.com",
        center: [90, 24],
        zoom: 5
    }
};

当数据量增大或需要频繁更新时，这种方法显然不可取。理想的解决方案是能够直接从外部文件（如Excel或JSON）动态加载数据。本教程将重点介绍如何使用SheetJS (XLSX) 库，将Excel文件中的数据无缝集成到JavaScript应用中。

解决方案：使用SheetJS (XLSX) 库

SheetJS是一个功能强大的JavaScript库，用于读取、解析和写入各种电子表格格式，包括XLSX、XLS、CSV等。它使得在浏览器端或Node.js环境中处理Excel数据变得异常简单。

1. 引入SheetJS库

首先，需要在HTML文件中引入SheetJS库。最简单的方法是通过CDN：

2. 从Excel文件读取数据并转换为JSON

以下步骤展示了如何通过异步操作获取远程Excel文件，并将其内容转换为JavaScript对象数组（JSON格式）：

m18麦考林整站 for Ecshop

m18麦考林整站 for Ecshop v2.7.3 安装方法： 1，解压rar包上传到网站根目录 2，导入sql数据库文件，到你的数据库里，可以phpmyadmin等软件 3，修改data里config.php里面的数据库 用户名 密码等信息 为你自己的数据库信息 4，安装完毕之后的后台用户名密码为： 后台地址：域名/admin 用户名：admin 密码：admin123 模板使用教程： htt

下载

立即学习“Java免费学习笔记（深入）”；

var json_data; // 声明一个全局变量来存储转换后的JSON数据

(async () => {
  try {
    // 步骤1: 获取Excel文件
    // 假设Excel文件可以通过URL访问。在实际应用中，你也可以通过文件上传控件获取本地文件。
    const url = "https://www.lucasroquilly.com/stack_overflow_samples/workbook.xls";
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    // 将响应数据读取为ArrayBuffer，这是SheetJS处理二进制文件所需的格式
    const data = await response.arrayBuffer();

    // 步骤2: 将ArrayBuffer转换为工作簿对象
    // XLSX.read() 方法解析二进制数据，返回一个工作簿对象
    const workbook = XLSX.read(data);

    // 步骤3: 获取工作簿中的第一个工作表
    // workbook.SheetNames 是一个包含所有工作表名称的数组
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];

    // 步骤4: 将工作表数据转换为JSON格式
    // XLSX.utils.sheet_to_json() 方法将工作表内容转换为JavaScript对象数组
    // 默认情况下，第一行会被视为键名
    json_data = XLSX.utils.sheet_to_json(worksheet);

    console.log("数据加载成功:", json_data);

    // 在数据加载完成后执行其他操作，例如更新UI
    // document.getElementById('output').innerText = JSON.stringify(json_data, null, 2);

  } catch (error) {
    console.error("加载或解析Excel文件时发生错误:", error);
  }
})();

3. 完整示例（HTML & JavaScript）

将上述JavaScript代码与一个简单的HTML结构结合，可以创建一个完整的可运行示例。

    
    
    
    
    


    
Excel数据导入示例
    
点击按钮查看从Excel文件加载并转换的JSON数据。
    Log JSON Data