上传解析 Excel 表(XLSX 文件)转为JSON数据

1. 安装 xlsx

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

复制代码
npm install xlsx

复制代码
yarn add xlsx

2. 导入 xlsx

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

javascript 复制代码
import * as XLSX from 'xlsx';

3. 读取文件内容

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

4. 示例代码

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

javascript 复制代码
<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. 解释

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

这样可以更清晰地理解每行代码的作用,并且确保你能够正确使用 xlsx 库来解析 XLSX 文件。

相关推荐
LuciferHuang7 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing7 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20157 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言8 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手9 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言9 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
hackchen9 小时前
Go与JS无缝协作:Goja引擎实战之错误处理最佳实践
开发语言·javascript·golang
你的人类朋友10 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手10 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3