当前位置：首页 > article >正文

上传解析 Excel 表（XLSX 文件）转为JSON数据

article 2025/3/11 15:43:05

1. 安装 `xlsx` 库

首先，你需要安装 xlsx 库。你可以使用 npm 或 yarn 来安装：

npm install xlsx

或

yarn add xlsx

2. 导入 `xlsx` 库

在你的 Vue 组件中导入 xlsx 库：

import * as XLSX from 'xlsx';

3. 读取文件内容

为了读取文件内容，你可以使用 FileReader API。以下是一个完整的示例，展示了如何读取文件并解析 XLSX 文件。

4. 示例代码

以下是一个完整的 Vue 组件示例，展示了如何使用 xlsx 库解析 XLSX 文件：

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept=".xlsx, .xls" /> <!-- 文件输入元素，当文件选择变化时调用 handleFileUpload 方法 -->
    <pre>{{ parsedData }}</pre> <!-- 显示解析后的数据 -->
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'; // 导入 Vue 的 defineComponent 和 ref 函数
import * as XLSX from 'xlsx'; // 导入 xlsx 库

export default defineComponent({
  setup() {
    const parsedData = ref([]); // 定义一个响应式引用 parsedData，初始值为空数组

    const handleFileUpload = (event: Event) => {
      const target = event.target as HTMLInputElement; // 将事件目标转换为 HTMLInputElement 类型
      const file = target.files && target.files[0]; // 获取用户选择的第一个文件
      if (file) { // 如果文件存在
        const reader = new FileReader(); // 创建 FileReader 对象
        reader.onload = (e) => { // 当文件读取完成后执行的回调函数
          const data = new Uint8Array(e.target?.result as ArrayBuffer); // 将文件内容转换为 Uint8Array
          const workbook = XLSX.read(data, { type: 'array' }); // 使用 xlsx 库解析文件内容为工作簿对象
          const worksheet = workbook.Sheets[workbook.SheetNames[0]]; // 获取工作簿中的第一个工作表
          const result = XLSX.utils.sheet_to_json(worksheet) as Array<Recordable>; // 将工作表转换为 JSON 格式的数据
          console.log('最终解析的 json 格式数据:'); // 输出日志，表示即将打印解析后的数据
          console.log(result); // 打印解析后的 JSON 数据
          parsedData.value = result; // 将解析后的数据赋值给 parsedData
        };
        reader.readAsArrayBuffer(file); // 以 ArrayBuffer 格式读取文件内容
      }
    };

    return {
      parsedData, // 返回 parsedData 以便在模板中使用
      handleFileUpload // 返回 handleFileUpload 方法以便在模板中使用
    };
  }
});
</script>

6. 解释

文件输入元素：定义一个文件输入元素，当文件选择变化时调用 handleFileUpload 方法。
显示解析后的数据：使用 <pre> 标签显示 parsedData 的内容。
导入 Vue 的 defineComponent 和 ref 函数：导入 Vue 的 defineComponent 和 ref 函数。
导入 xlsx 库：导入 xlsx 库。
定义组件：使用 defineComponent 定义一个 Vue 组件。
设置组件逻辑：在 setup 函数中编写组件逻辑。
定义一个响应式引用 parsedData，初始值为空数组：使用 ref 创建一个响应式引用 parsedData，初始值为空数组。
定义 handleFileUpload 方法：定义一个处理文件上传的方法。
将事件目标转换为 HTMLInputElement 类型：将事件目标转换为 HTMLInputElement 类型。
获取用户选择的第一个文件：从事件目标中获取用户选择的第一个文件。
如果文件存在：检查文件是否存在。
创建 FileReader 对象：创建 FileReader 对象。
当文件读取完成后执行的回调函数：定义 onload 回调函数，当文件读取完成后执行。
将文件内容转换为 Uint8Array：将文件内容转换为 Uint8Array。
使用 xlsx 库解析文件内容为工作簿对象：使用 XLSX.read 方法将文件内容解析为工作簿对象。
获取工作簿中的第一个工作表：从工作簿对象中获取第一个工作表。
将工作表转换为 JSON 格式的数据：使用 XLSX.utils.sheet_to_json 方法将工作表转换为 JSON 格式的数据，并将其类型断言为 Array<Recordable>。
输出日志，表示即将打印解析后的数据：在控制台中输出日志，表示即将打印解析后的数据。
打印解析后的 JSON 数据：在控制台中打印解析后的 JSON 数据。
将解析后的数据赋值给 parsedData：将解析后的数据赋值给 parsedData。
以 ArrayBuffer 格式读取文件内容：使用 readAsArrayBuffer 方法以 ArrayBuffer 格式读取文件内容。
返回 parsedData 以便在模板中使用：返回 parsedData 以便在模板中使用。
返回 handleFileUpload 方法以便在模板中使用：返回 handleFileUpload 方法以便在模板中使用。