xlsx.js 读取excel文件

news2024/11/8 11:59:23

需求:读取一个excel文件。

一、 使用antd的Upload组件的 【customRequest】方法。
  1. 互斥。此方法跟【onChange】方法互斥,即:不可同时出现。
  2. 调用次数不一样。onChange方法会根据文件当前的上传状态从而被调用多次(读取中,上传中,上传失败、上传完成等)。
    customRequest方法是自定义读取和上传的文件,因此,onChange方法的几个状态,【customRequest】方法默认是没有的,因此【customRequest】方法只会被调用1次
  3. 参数不一样。onChange方法在读取完成后,会拿到一个数据。这个数据是 antd组件处理过后的数据,包含了一些读取状态等其他属性。(但是也无法直接看到文件里的内容)。
    【customRequest】方法拿到的file数据是未经处理的,无法看到文件里的数据。

在这里插入图片描述

二. 如何读取文件?

在这里插入图片描述

  • readAsBinaryString 方法:按字节读取文件内容,结果为文件的二进制串。 这个结果,会作为参数 传递给 fileReader的 onload方法 (此方法会被逐渐废弃。不推荐使用。
  • readAsArrayBuffer 方法:同上,结果为ArrayBuffer (推荐使用)

数据转化过程:

  1. upload组件拿到的 原始的文件数据(customRequest的参数file)
  2. 二进制流 or ArrayBuffer 。readAsBinaryString的方式读取后的数据为二进制流。readAsArrayBuffer读取出来的数据是ArrayBuffer
  3. webhooks.里面是真个表的所有信息。
  4. sheet。某个子表单的数据。里面是每个单元格的信息
  5. sheet_to_json 方法将 sheet 转成 对象数组
import { read as xlsxRead, utils as xlsxUtils } from 'xlsx';
  
// 批量导入
  const customRequest = (files) => {
    const { file } = files;
        
    // step1 :创建一个 fileReader对象
    const fileReader = new FileReader();
    
    // step2: onload方法是 读完数据后 调用的方法。用来对读取后的数据进行一些处理
    fileReader.onload = (event: any) => {
      try {
        const { result } = event.target;
        console.log('event', event);
        // 1 以二进制流方式(buffer方式)读取得到整份excel表格对象,cellDates设为true,将读取到的天数的时间戳转为时间格式
        const workbook = xlsxRead(result, {
          type: 'binary',//🐷🐷🐷 如果readAsArrayBuffer方法读取文件则type:'buffer'🐷🐷
          cellDates: true,
        });
        console.log('workbook', workbook);
        // 2 遍历每张工作表进行读取(这里默认只读取第一张表)Sheets是个数组
        const { Sheets } = workbook;
        const sheet0 = Sheets[Object.keys(Sheets)[0]];
        console.log('sheet0', sheet0);
        // 4 利用 sheet_to_json 方法将 sheet 转成 对象数组
        const fileData =  xlsxUtils.sheet_to_json(sheet0)

        // convertToData(fileData);
      } catch (e) {
        // 这里可以抛出文件类型错误不正确的相关提示
        message.error(formatMessage({ id: 'create_order.fileError' }));
      }
    };
// step3: 使用 readAsBinaryString、或者 readAsArrayBuffer 来读取 文件。
    fileReader.readAsBinaryString(file);

  };

最后

二进制的数据流解析后。长什么样?
在这里插入图片描述

ArrayBuffer长什么样子?如下图。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2235801.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

WPF中的依赖属性

1.创建项目后下载两个NuGet程序包 2.创建一个MyButton类继承Button MyButton类如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Contro…

Java执行顺序大揭秘:静态块、非静态块和构造方法谁先谁后?

我是小米,一个喜欢分享技术的29岁程序员。如果你喜欢我的文章,欢迎关注我的微信公众号“软件求生”,获取更多技术干货! Hello大家好,我是小米!今天咱们来聊聊Java中的一个小而重要的知识点——初始化块。可能有的小伙伴一听这名字就觉得有点头大,这东西到底是干嘛的?为…

【Linux系列】字符串操作的艺术:删除前缀的 Shell 脚本技巧

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

nginx 部署2个相同的vue

起因: 最近遇到一个问题,在前端用nginx 部署 vue, 发现如果前端有改动,如果不适用热更新,而是直接复制项目过去,会404 因此想到用nginx 负载两套相同vue项目,然后一个个复制vue项目就可以了。…

Maven(六)mvn 命令将 jar 包推送到 远程/本地仓库

目录 一、deploy - 推送到远程仓库1.1 命令语法:1.2 执行结果:1.3 可能遇到的问题问题1:with status code 401问题2:with status code 405问题3:Cannot deploy artifact from the local repository 二、install - 推送…

WEB 应用防护系统的部署方式

在当今数字化飞速发展的时代,WEB 应用面临着来自各方的安全威胁,而 WEB 应用防护系统(WAF)的部署成为了保障网络安全至关重要的环节。以下将详细介绍几种常见的 WEB 应用防护系统部署方式。根据 WAF 接入网络后的工作方式&#xf…

Java——静态成员

一、静态变量(Static Variables) 1、静态变量是什么 静态变量,又被称为类变量,它使用 static 关键字修饰。静态变量是类级别的变量,在类加载时初始化。 2、静态变量的特点 类级别共享:静态变量在所有实…

Java | Leetcode Java题解之第542题01矩阵

题目: 题解: class Solution {static int[][] dirs {{-1, 0}, {1, 0}, {0, -1}, {0, 1}};public int[][] updateMatrix(int[][] matrix) {int m matrix.length, n matrix[0].length;// 初始化动态规划的数组,所有的距离值都设置为一个很大…

996引擎 - 活捉NPC

996引擎 - 活捉NPC 引擎触发 - 引擎事件(QF)事件处理模块 GameEvent测试文件参考资料 引擎触发 - 引擎事件(QF) cfg_game_data 配置 ShareNpc1 可以将QM和机器人的触发事件全部转到 QF 引擎触发是通用的,TXT的所有触发转换成小写后在LUA中就可使用,如说明书中缺省可反馈至对接群…

【Linux系统编程】第四十三弹---多线程编程指南:线程终止方式与C++11中的thread

✨个人主页: 熬夜学编程的小林 💗系列专栏: 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、线程终止 1.1、pthread_exit() 1.2、pthread_cancel() 1.3、pthread_detach() 2、C11中thread 1、线程终止 问题7 …

【Mac】PD报错:无法为“Windows” 完成操作,虚拟机ID无效的解决办法

Parallels Desktop是Mac上一款非常常用的虚拟机软件,但是在使用过程中,可能会遇到一些问题不知道如何处理。比如有时会遇到PD报错:无法为“Windows 11”完成操作,虚拟机ID无效。 错误原因 电脑上安装过虚拟机,虚拟机被…

25-RVIZ CARLA插件

RVIZ插件(RVIZ plugin)提供了一个基于RVIZ(RVIZ) ROS包的可视化工具。 用RVIZ运行ROS桥接 RVIZ插件需要一个名为ego_vehicle的自车。要查看ROS-bridge使用RVIZ的示例,请在运行CARLA服务器的情况下执行以下命令: 1. 启用RVIZ启动ROS桥接: # …

spark-本地模式的配置和简单使用

python环境的安装 在虚拟机中,只能安装一个python的版本,若想要安装别的版本,则需要卸载之前的版本——解决方式,安装Anaconda 通过百度网盘分享的文件:Anaconda3-2021.05-Linux-x86_64.sh 链接:https://…

【算法】递归+回溯+剪枝:78.子集

目录 1、题目链接 2、题目 3、解法(回溯剪枝) 4、代码 1、题目链接 78.子集(LeetCode) 2、题目 3、解法(回溯剪枝) 思路: 枚举子集(答案)的第一个数选谁,第二个数选谁,第三个数选谁&#x…

Aop+自定义注解实现数据字典映射

数据字典 Web项目开发中,字典表的一般都会存在,主要用来给整个系统提供基础服务。 比如男女性别的类型可以使用0和1来进行表示,在存储数据和查询数据的时候,就可以使用字典表中的数据进行翻译处理。 再比如之前做的一个项目中宠物…

【NLP自然语言处理】深入探索Self-Attention:自注意力机制详解

目录 🍔 Self-attention的特点 🍔 Self-attention中的归一化概述 🍔 softmax的梯度变化 3.1 softmax函数的输入分布是如何影响输出的 3.2 softmax函数在反向传播的过程中是如何梯度求导的 3.3 softmax函数出现梯度消失现象的原因 &…

华为eNSP:QinQ

一、什么是QinQ? QinQ是一种网络技术,全称为"Quantum Insertion",也被称为"Q-in-Q"、"Double Tagging"或"VLAN stacking"。它是一种在现有的VLAN(Virtual Local Area Network&#xff0…

细说STM32单片机USART中断收发RTC实时时间并改善其鲁棒性的另一种方法

目录 一、工程目的 1、目标 2、通讯协议及应对错误指令的处理目标 二、工程设置 三、程序改进 四、下载与调试 1、合规的指令 2、不以#开头,但以;结束,长度不限 3、以#开头,不以;结束,也不包含;,长…

Redis设计与实现 学习笔记 第十六章 Sentinel

Sentinel(哨岗、哨兵)是Redis的高可用性(high availability)解决方案:由一个或多个Sentinel实例(instance)组成的Sentinel系统可以监视任意多个主服务器,以及这些主服务器属下的从服…

前端三件套-css

一、元素选择器 元素选择器&#xff1a;利用标签名称。p,h1-h6...... 行内样式&#xff08;内联样式&#xff09;&#xff1a;例如<p style"color:red;font-size:50px"> id选择器&#xff1a;针对某一个特定的标签来使用。以#定义。 class&#xff08;类&a…