上传解析 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 文件。

相关推荐
白白李媛媛几秒前
vue3中实现echarts打印功能
前端·vue.js·echarts
一只卡比兽1 分钟前
全栈Node.js开发:集成第三方AI提供商Token的完整指南
javascript
尘心cx2 分钟前
前端-HTML-day2
前端·html
歘chua3 分钟前
组件封装:封装一个可复用的crud界面的思路
前端
徐小夕4 分钟前
牛!用vue3实现的多维表格编辑器,小白也能轻松构建复杂数据报表!
前端·javascript·vue.js
程十六5 分钟前
工匠指南:从 Vue 3 源码中学习高质量代码的艺术
javascript·vue.js
爱编程的喵6 分钟前
CSS动画实战:从零打造一个超萌的小球亲亲动画
前端·css
zmirror7 分钟前
Webpack5 多页面实践
前端
cccyi78 分钟前
vue前置知识-end
前端·javascript·vue.js
JaysonJin11 分钟前
一文搞懂 Vue Router 的钩子函数和实战用法!
前端