将Excel数据导入JavaScript：一份简易教程-html教程-PHP中文网

将Excel数据导入JavaScript：一份简易教程

花韻仙語

发布： 2025-09-02 15:48:14

原创

537人浏览过

将excel数据导入javascript：一份简易教程

本文旨在提供一种简便的方法，将Excel数据导入到JavaScript应用中。通过使用SheetJS库，我们可以轻松地读取Excel文件并将其转换为JSON格式，从而方便地在JavaScript中使用。本文将详细介绍如何使用SheetJS库读取Excel数据，并提供完整的示例代码。

1. 引入SheetJS库

首先，你需要在你的HTML文件中引入SheetJS库。你可以通过以下CDN链接引入：

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

登录后复制

请确保将此代码添加到你的HTML文件的<head>或<body>标签中。

2. 读取Excel数据

接下来，我们将使用JavaScript代码来读取Excel数据。以下是一个示例代码片段：

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

var jsonData;

(async () => {
  // Excel文件URL
  const url = "https://www.lucasroquilly.com/stack_overflow_samples/workbook.xls";

  // 获取Excel文件数据
  const data = await (await fetch(url)).arrayBuffer();

  // 将数据转换为工作簿对象
  const workbook = XLSX.read(data);

  // 获取第一个工作表
  const worksheet = workbook.Sheets[workbook.SheetNames[0]];

  // 将工作表转换为JSON数据
  jsonData = XLSX.utils.sheet_to_json(worksheet);

  // 打印JSON数据到控制台 (可选)
  console.log(jsonData);
})();

登录后复制

代码解释：

网易人工智能

网易数帆多媒体智能生产力平台

查看详情

jsonData: 用于存储从Excel转换而来的JSON数据。
url: 指向你的Excel文件的URL。请替换成你自己的Excel文件URL。
fetch(url): 使用fetch API获取Excel文件的数据。await关键字确保在数据完全加载后才继续执行。
arrayBuffer(): 将获取的数据转换为ArrayBuffer对象，这是SheetJS库所需要的格式。
XLSX.read(data): 使用SheetJS库的read方法将ArrayBuffer对象转换为工作簿对象。
workbook.Sheets[workbook.SheetNames[0]]: 获取工作簿中的第一个工作表。workbook.SheetNames是一个包含所有工作表名称的数组。
XLSX.utils.sheet_to_json(worksheet): 使用SheetJS库的sheet_to_json方法将工作表转换为JSON数据。

3. 使用JSON数据

现在，jsonData变量中已经包含了从Excel文件转换而来的JSON数据。你可以在你的JavaScript代码中使用这些数据，例如：

// 示例：遍历JSON数据并打印每个对象的countryName属性
(async () => {
  await new Promise(resolve => setTimeout(resolve, 100)); // 确保jsonData已赋值
  jsonData.forEach(item => {
    console.log(item.countryName);
  });
})();

登录后复制

注意： 由于fetch是异步操作，你需要确保在jsonData被赋值后才能使用它。上面的代码使用setTimeout简单地等待一段时间，更严谨的做法是使用Promise或async/await机制来确保数据加载完成后再进行处理。

4. 完整示例

以下是一个完整的HTML示例，包含了引入SheetJS库、读取Excel数据和使用JSON数据的代码：

<!DOCTYPE html>
<html>
<head>
  <title>Excel to JSON</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.min.js"></script>
</head>
<body>
  <button onclick="logJson()">Log JSON Data</button>
  <script>
    var jsonData;

    (async () => {
      // Excel文件URL
      const url = "https://www.lucasroquilly.com/stack_overflow_samples/workbook.xls";

      // 获取Excel文件数据
      const data = await (await fetch(url)).arrayBuffer();

      // 将数据转换为工作簿对象
      const workbook = XLSX.read(data);

      // 获取第一个工作表
      const worksheet = workbook.Sheets[workbook.SheetNames[0]];

      // 将工作表转换为JSON数据
      jsonData = XLSX.utils.sheet_to_json(worksheet);
    })();

    function logJson() {
      console.log(jsonData);
    }
  </script>
</body>
</html>

登录后复制

在这个示例中，点击按钮会将jsonData的内容打印到控制台。

注意事项

跨域问题： 如果你的Excel文件位于不同的域名下，可能会遇到跨域问题。你需要配置服务器以允许跨域请求，或者将Excel文件放在与你的HTML文件相同的域名下。
文件格式： SheetJS库支持多种Excel文件格式，包括.xls和.xlsx。
数据类型： SheetJS库会自动检测Excel单元格中的数据类型，并将其转换为相应的JavaScript类型。
性能： 对于大型Excel文件，转换过程可能需要一些时间。你可以考虑使用Web Workers来在后台线程中执行转换，以避免阻塞主线程。

总结

通过使用SheetJS库，我们可以轻松地将Excel数据导入到JavaScript应用中。这种方法简单易用，并且可以处理多种Excel文件格式。希望本教程能够帮助你更好地处理Excel数据，并将其应用到你的JavaScript项目中。

以上就是将Excel数据导入JavaScript：一份简易教程的详细内容，更多请关注php中文网其它相关文章！