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

花韻仙語

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

552人浏览过

来源于php中文网

原创

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

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

1. 引入SheetJS库

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

请确保将此代码添加到你的HTML文件的

或标签中。

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);
})();

代码解释：

易语言学习手册十天学会易语言图解教程 pdf版

十天学会易语言图解教程用图解的方式对易语言的使用方法和操作技巧作了生动、系统的讲解。需要的朋友们可以下载看看吧！全书分十章，分十天讲完。第一章是介绍易语言的安装，以及运行后的界面。同时介绍一个非常简单的小程序，以帮助用户入门学习。最后介绍编程的输入方法，以及一些初学者会遇到的常见问题。第二章将接触一些具体的问题，如怎样编写一个1+2等于几的程序，并了解变量的概念，变量的有效范围，数据类型等知识。其后，您将跟着本书，编写一个自己的MP3播放器，认识窗口、按钮、编辑框三个常用组件。以认识命令及事件子程序。第

下载

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数据的代码：




  Excel to JSON

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

注意事项

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