JS 读取Excel文件|极客笔记

JS 读取Excel文件

在Web开发中，有时候我们需要读取Excel文件中的数据。而JavaScript作为Web开发中最常用的脚本语言之一，也提供了一些方法来读取Excel文件。本文将介绍如何使用JavaScript来读取Excel文件中的数据，并展示一些示例代码。

1. 通过文件输入框读取Excel文件

首先我们可以创建一个文件输入框，让用户选择要读取的Excel文件。然后通过JavaScript来处理这个文件，并提取其中的数据。

<input type="file" id="fileInput" accept=".xls,.xlsx">
<button onclick="readExcel()">读取Excel文件</button>

<script>
function readExcel() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];

  const reader = new FileReader();
  reader.onload = function(e) {
    const data = e.target.result;
    // 处理Excel文件中的数据
  };
  reader.readAsBinaryString(file);
}
</script>

上面的代码中，我们创建了一个文件输入框和一个按钮，当用户点击按钮时，会调用readExcel函数来读取用户选择的Excel文件。在readExcel函数中，我们通过FileReader对象来读取Excel文件中的数据。

2. 使用第三方库解析Excel文件

另一种更常见的方法是使用第三方库来解析Excel文件，这样可以更方便地处理文件中的数据。以下是使用sheetjs/xlsx库来解析Excel文件的示例代码。

首先我们需要引入xlsx.core.min.js文件：

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

然后可以使用以下代码来读取Excel文件中的数据：

<input type="file" id="fileInput" accept=".xls,.xlsx">
<button onclick="readExcel()">读取Excel文件</button>

<script>
function readExcel() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];

  const reader = new FileReader();
  reader.onload = function(e) {
    const data = e.target.result;

    const wb = XLSX.read(data, {type: 'binary'});
    wb.SheetNames.forEach(function(sheetName) {
      const sheet = wb.Sheets[sheetName];
      const data = XLSX.utils.sheet_to_json(sheet);
      console.log(data);
    });
  };
  reader.readAsBinaryString(file);
}
</script>

以上代码中，我们首先通过FileReader对象读取Excel文件中的数据，并使用XLSX.read方法将文件解析成一个Workbook对象。然后通过XLSX.utils.sheet_to_json方法将每个工作表中的数据转换成JSON格式，并输出到控制台中。

3. 示例代码运行结果

为了演示以上代码的运行结果，我们准备了一个简单的Excel文件example.xlsx，内容如下：

| Name  | Age | Gender |
|-------|-----|--------|
| Alice | 25  | Female |
| Bob   | 30  | Male   |
| Carol | 35  | Female |

当我们选择example.xlsx文件并点击“读取Excel文件”按钮时，控制台输出如下结果：

[
  { Name: "Alice", Age: 25, Gender: "Female" },
  { Name: "Bob", Age: 30, Gender: "Male" },
  { Name: "Carol", Age: 35, Gender: "Female" }
]

从上面的结果可以看出，我们成功读取了Excel文件中的数据，并将其转换成了JSON格式。

总结

本文介绍了通过JavaScript来读取Excel文件的方法，包括通过文件输入框和使用第三方库解析Excel文件。通过以上示例代码，我们可以方便地读取Excel文件中的数据，从而在Web开发中更灵活地处理数据。

JS 读取Excel文件