xlsx.js 读取excel文件

需求:读取一个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.xdnf.cn/news/7983.html

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

相关文章

华为云创建ECS前台展示规格类型选项是怎么做到的?

前台展示很多规格可选,怎么做到的?先了解规格其实都是管理员在后台service_OM创建好规格 1.规格 1.1设置自定义标签打通规格和主机组还能体验调度功能 引申:AZ可用分区(为了做容灾) 为什么在界面可以让我√az0.dc0,在填工程参数openstack region信息已写 AZ间存储不能共…

我们来学mysql -- 同时使用 AND 和 OR 查询错误(填坑篇)

AND 和 OR 一同使用问题 现象分析处理扩展 现象 业务上在“锁定”当前零件所在出口国的所有零件时,出现其他国家零件 问题定位 分析 or 切断了操作符之间的连续性,从union角度分析 where k1 Td621 and k1 Vda96 or k3 P00009等同 select * fr…

Python入门:了解 Python 中 globals() 和 types 的用法

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 文章内容 📒📝 使用 `globals()` 获取当前作用域信息📝 使用 `types` 模块判断函数类型📝 `globals()` 与 `types` 结合使用📢 综合示例📝 总结⚓️ 相关链接 ⚓️📖 介绍 📖 在 Python 中,动态获取当前作用域…

InsectaIntel 智能昆虫识别平台

项目介绍 InsectaIntel智能昆虫识别平台是一款革命性的软件,它将尖端的计算机视觉和深度学习技术融入昆虫识别领域,为用户提供了一个前所未有的工具。该平台通过集成先进的技术,不仅提高了昆虫识别的准确性,还极大地增强了用户体…

Python数据分析NumPy和pandas(二十六、数据整理--连接、合并和重塑 之三:重塑和透视)

对表格数据的重新排列操作,称为 reshape 或 pivot 。有很多种方法对表格数据进行重塑。 一、使用分层索引进行reshape 分层索引提供了一种在 DataFrame 中重新排列数据的方法。主要有两个函数方法: stack:将数据中的列旋转或透视到行。 u…

新能源行业必会基础知识-----电力现货市场理论篇-----电力现货市场价格机制-----电力市场价格体系

新能源行业必会基础知识-----电力现货市场理论篇-----主目录-----持续更新https://blog.csdn.net/grd_java/article/details/143364261 这本书是2023年出版的,是当下了解国内电力市场最好的途径了。还是推荐大家买来这本书进行阅读观看,最好作为随身携带…

使用免费的飞书机器人,实现消息推送实时通知

大家好,我是小悟。 实际工作中,我们会经常遇到需要给用户发送业务通知的功能需求,如果是小程序端,那么就使用小程序提供的模板消息通知,如果是APP端,一般就是使用个推、极光等第三方平台。 当然还有个万能…

SPIRE: Semantic Prompt-Driven Image Restoration 论文阅读笔记

这是一篇港科大学生在google research 实习期间发在ECCV2024的语义引导生成式修复的文章,港科大陈启峰也挂了名字。从首页图看效果确实很惊艳,尤其是第三行能用文本调控修复结果牌上的字。不过看起来更倾向于生成,对原图内容并不是很复原&…

MySQL server 免安装教程

1,下载免安装包-社区版本 https://dev.mysql.com/downloads/file/?id534320 2,解压 放到一电脑某个路径下,整个包 3,创建data 文件夹和my.ini文件 my.ini代码照抄,注意修改路径,与解压后的安装包地址一…

网络基础知识--1

1. 说说HTTP常用的状态码及其含义 1.1日 常 开 发 中 的 这 几 个 状 态 码 的 含 义 2. HTTP 常用的请求方式,区别和用途 思 路 : 这 道 题 主 要 考 察 候 选 人 , 是 否 掌 握 H T T P 请 求 方 式 这 个 基 础 知 识 点 , 我 们 用 …

MySQL日志——针对实习面试

目录 MySQL日志MySQL有哪些日志?请解释一下MySQL的二进制日志(Binlog)的作用?复制(Replication)数据恢复(Point-in-Time Recovery) Binlog日志的三种格式是什么?如何使用…

CKA认证 | Day1 k8s核心概念与集群搭建

第一章 Kubernetes 核心概念 1、主流的容器集群管理系统 容器编排系统: KubernetesSwarmMesos Marathon 2、Kubernetes介绍 Kubernetes是Google在2014年开源的一个容器集群管理系统,Kubernetes简称K8s。 Kubernetes用于容器化应用程序的部署&#x…

浅谈智能家居在智慧养老实训室中的作用

随着人口老龄化的加剧,智慧养老逐渐成为社会关注的热点。在此背景下,智能家居技术以其独特的优势受到广泛关注。智能家居不再是奢侈品,而是提升老年人生活品质和家庭养老效率的有效工具。它们为老年人提供了便捷、安全、舒适的生活环境&#…

后端eclipse——文字样式:UEditor富文本编辑器引入

目录 1.富文本编辑器的优点 2.文件的准备 3.文件的导入 导入到项目: 导入到html文件: ​编辑 4.富文本编辑器的使用 1.富文本编辑器的优点 我们从前端写入数据库时,文字的样式具有局限性,不能存在换行,更改字体…

SpringBoot框架下的资产管理自动化

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统,它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等,非常…

焕然一新!TinyVue 组件库 UI 大升级,更符合现代的审美!

本文由体验技术团队Kagol原创。 自从 TinyVue 组件库去年开源以来,一直有小伙伴反馈我们的 UI 不够美观,风格陈旧,不太满足现阶段审美。 “TinyVue 给我的感觉就是一个没啥审美能力、但是很努力的老程序员开发的” 看到这个评价,…

C语言实践:实现插入排序

开篇 本篇文章的题目来源是《编程珠玑》第11章【排序】的第一个小节。不知不觉,已经看到第11章了呀。 主体 想到排序,想必大家第一时间,想到的都会是下面的这种方式。 for i [1, n]for (j i; j > 0 && x[j-1] > x[j]; j--)s…

idea | 搭建 SpringBoot 项目之配置 Maven

目录 1 配置 Maven1.1 打开 settings.xml 文件1.2 配置本地仓库路径1.3 配置中央仓库路径1.4 配置 JDK 版本1.5 重新下载项目依赖 2 配置 idea2.1 在启动页打开设置2.2 配置 Java Compiler2.3 配置 File Encodings2.4 配置 Maven2.5 配置 Auto Import2.6 配置 Cod…

Ubuntu学习笔记 - Day2

文章目录 学习目标:学习内容:学习笔记:Linux系统启动过程内核引导运行init运行级别系统初始化建立终端用户登录系统 Ubuntu关机关机流程相关命令 Linux系统目录结构查看目录目录结构 文件基本属性读写权限命令 下载文件的方法安装wget工具下载…

30-手动准备地图包

map包遵循特定的文件夹结构,并且必须包含描述该结构的.json文件。我们的自动地图导入过程自动创建这个.json文件,但您也可以选择自己准备它。包括您自己的.json文件将覆盖传递给make import命令的任何参数。 标准地图 为标准地图创建文件夹结构 1.…