从Excel导入数据到JavaScript：使用SheetJS库的实用教程-html教程-PHP中文网

从Excel导入数据到JavaScript：使用SheetJS库的实用教程

花韻仙語

发布： 2025-09-02 16:07:24

原创

795人浏览过

从Excel导入数据到JavaScript：使用SheetJS库的实用教程

本教程旨在解决JavaScript应用中手动输入数据效率低下的问题，特别是当数据源为Excel文件时。我们将详细介绍如何利用SheetJS (XLSX) 库，通过异步操作从外部Excel文件读取数据，并将其高效地转换为JavaScript可用的JSON格式，从而简化数据管理流程，提升开发效率。

背景与挑战

在前端开发中，我们经常需要处理大量结构化数据。手动将这些数据硬编码到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：

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.min.js"></script>

登录后复制

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

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

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

立即学习“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结构结合，可以创建一个完整的可运行示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>从Excel导入数据到JavaScript</title>
    <!-- 引入SheetJS库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.min.js"></script>
</head>
<body>
    <h1>Excel数据导入示例</h1>
    <p>点击按钮查看从Excel文件加载并转换的JSON数据。</p>
    <button onclick="logJsonData()">Log JSON Data</button>
    <pre id="output"></pre>

    <script>
        var json_data; // 全局变量，用于存储转换后的JSON数据

        (async () => {
            try {
                const url = "https://www.lucasroquilly.com/stack_overflow_samples/workbook.xls"; // 示例Excel文件URL
                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const data = await response.arrayBuffer();
                const workbook = XLSX.read(data);
                const firstSheetName = workbook.SheetNames[0];
                const worksheet = workbook.Sheets[firstSheetName];
                json_data = XLSX.utils.sheet_to_json(worksheet);
                console.log("Excel数据已成功加载并转换为JSON:", json_data);
                // 可以在这里更新UI，例如显示数据已准备就绪
                document.getElementById('output').innerText = "数据已加载，点击 'Log JSON Data' 查看。";

            } catch (error) {
                console.error("加载或解析Excel文件时发生错误:", error);
                document.getElementById('output').innerText = "加载数据失败: " + error.message;
            }
        })();

        // 点击按钮时在控制台打印JSON数据
        function logJsonData() {
            if (json_data) {
                console.log("当前加载的JSON数据:", json_data);
                alert("JSON数据已在控制台打印，请打开开发者工具查看。");
                // 也可以直接在页面上显示
                document.getElementById('output').innerText = JSON.stringify(json_data, null, 2);
            } else {
                console.warn("数据尚未加载完成或加载失败。");
                alert("数据尚未加载完成或加载失败，请稍后再试或检查控制台错误。");
            }
        }
    </script>
</body>
</html>

登录后复制

注意事项与最佳实践

异步操作： fetch API是异步的，因此整个数据加载和处理过程都应该在异步函数（async/await）中进行，以避免阻塞主线程并确保数据在被使用前已完全加载。
错误处理： 务必包含错误处理机制（try...catch），以应对网络请求失败、文件格式错误或解析异常等情况。
文件来源： 示例中从远程URL加载文件。在实际应用中，你可能需要处理用户上传的本地Excel文件。这可以通过HTML <input type="file"> 元素结合 FileReader API来实现。
大型文件处理： 对于非常大的Excel文件，直接在浏览器端处理可能会消耗大量内存和CPU资源，甚至导致页面卡顿或崩溃。此时，可以考虑在服务器端进行Excel到JSON的转换，然后将JSON数据发送到前端。
数据结构： XLSX.utils.sheet_to_json 默认将Excel工作表的第一行视为JSON对象的键名。如果你的Excel文件没有标题行，或者标题行不符合预期，可能需要调整 sheet_to_json 的选项（例如 header: 1 表示从第一行开始作为数据，不作为标题，或者手动指定 header 数组）。
安全性： 如果从用户上传的文件中读取数据，需要注意潜在的安全风险，例如恶意文件可能导致浏览器崩溃或执行不安全脚本。SheetJS本身在解析方面是安全的，但仍需对用户输入进行验证。
R语言集成： 虽然本教程专注于JavaScript，但如果你的工作流中涉及R语言，可以利用R的 readxl 或 openxlsx 等包在后端将Excel数据处理为JSON或CSV，然后通过API提供给前端JavaScript应用。