【React+Antd】关于Upload导入XLSX时Uint8Array报错 XLSX.read的问题原因及解决方法

简介: 【React+Antd】关于Upload导入XLSX时Uint8Array报错 XLSX.read的问题原因及解决方法

报错TypeError: Cannot read properties of undefined (reading 'read') 的时候 把导入import XLSX from 'xlsx'; 改成 import * as XLSX from 'xlsx/xlsx.mjs'; 就可以了,请问是为什么?

这是因为 XLSX 库的模块结构发生了变化,从传统的 CommonJS 模块转换为 ES 模块。

相关知识

当涉及到 JavaScript 模块系统时,有两种常见的导入方式:CommonJS 和 ES 模块。

  1. CommonJS 和 ES 模块的区别:

    • CommonJS 是 Node.js 默认的模块系统,它使用 require()module.exports 进行模块的导入和导出。
    • ES 模块是 ECMAScript 标准定义的模块系统,在浏览器端和最新版本的 Node.js 中得到广泛支持,使用 importexport 语法进行模块的导入和导出。
  2. CommonJS 和 ES 模块的语法对比:

    • CommonJS 的导入语法:const module = require('module');
    • CommonJS 的导出语法:module.exports = module;
    • ES 模块的导入语法:import module from 'module';
    • ES 模块的导出语法:export default module;
  3. CommonJS 和 ES 模块的特性对比:

    • CommonJS 是同步加载模块,适用于服务器端的模块加载。
    • ES 模块是异步加载模块,支持静态分析,适用于浏览器端的模块加载。
  4. 在浏览器中使用 ES 模块:

    • 在现代浏览器中,可以使用 <script type="module"> 的方式来引入和使用 ES 模块。
    • 在 ES 模块中,可以使用 importexport 语法来导入和导出模块。
  5. 在 Node.js 中使用 ES 模块:

    • 在较新版本的 Node.js 中,可以直接使用 ES 模块的语法进行导入和导出。
    • 可以使用 .mjs 文件扩展名来标识该文件是 ES 模块。
    • 或者可以在 package.json 文件中设置 "type": "module" 来启用 ES 模块,然后可以使用 .js 文件扩展名进行导入和导出。

    CommonJS 和 ES 模块系统的差异。

相关文章
|
7月前
|
数据采集 前端开发 API
React - 实现一个基于 Antd 的数值范围组件
这篇文章介绍了如何实现一个基于Ant Design的数值范围组件,以满足数据采集流程中表单数据的录入需求。文章详细说明了组件的设计思路、代码结构、使用方式以及参数说明,并提供了效果预览和注意事项。组件支持只能输入数字,具有自定义表单控件封装的特点,同时支持所有InputNumber属性,以适应不同业务场景的需求。
239 0
React - 实现一个基于 Antd 的数值范围组件
|
6月前
|
编解码 前端开发 JavaScript
js react antd 实现页面低分变率和高分变率下字体大小自适用,主要是配置antd
在React中结合Ant Design与媒体查询,通过less变量和响应式断点动态调整`@font-size-base`,实现多分辨率下字体自适应,提升跨设备体验。
315 2
|
7月前
|
前端开发 安全 数据安全/隐私保护
React - 实现一个基于 Antd 的密码强度校验组件
这篇文章介绍了一个基于 Nest 和 Umi 技术栈的个人项目开发中用到的密码强度校验组件的开发过程。作者首先在网上找不到满意的资料,于是决定自己开发该组件。文章依次介绍了效果预览、组件思想和组件开发的过程,并提供了相应的代码示例。最后,作者展示了实际效果,并提供了仓库地址供参考。
294 0
React - 实现一个基于 Antd 的密码强度校验组件
|
存储 编解码 前端开发
React 视频上传组件 Video Upload
随着互联网的发展,视频内容在网站和应用中愈发重要。本文探讨如何使用React构建高效、可靠的视频上传组件,涵盖基础概念、常见问题及解决方案。通过React的虚拟DOM和组件化开发模式,实现文件选择、进度显示、格式验证等功能,并解决跨域请求、并发上传等易错点。提供完整代码案例,确保用户能顺畅上传视频。
610 92
|
前端开发 JavaScript Java
SpringBoot项目部署打包好的React、Vue项目刷新报错404
本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。
1445 1
|
移动开发 前端开发 JavaScript
React 音频上传组件 Audio Upload
本文介绍如何使用React构建音频上传组件,涵盖文件上传原理、React中文件处理步骤及常见问题解决方案。通过代码示例详细讲解了文件格式和大小限制、预览功能、进度条显示等实现方法,并针对跨域问题、文件名冲突和错误处理等易错点提供了解决方案,帮助开发者构建稳定可靠的音频上传功能。
384 25
|
移动开发 前端开发 API
React 拖拽上传组件 Drag & Drop Upload
拖拽上传(Drag & Drop Upload)是现代文件上传方式,允许用户通过简单拖拽操作将文件上传至网页。本文介绍如何在React应用中实现拖拽上传组件,涵盖HTML5拖放API、React状态管理、组件构建及常见问题解决。包括视觉反馈、文件类型和大小限制等优化措施,确保组件的用户体验和稳定性。
590 27
|
前端开发 JavaScript UED
React 音频上传组件:Audio Upload
本文介绍如何使用React构建音频上传组件,涵盖文件选择、预览、上传操作及错误处理。React的优势包括状态管理、组件化开发和丰富的生态系统支持。常见问题如文件类型验证、大小限制、并发上传控制、进度显示和错误重试机制也得到了详细探讨。通过示例代码展示了完整的实现过程,帮助开发者提升组件的稳定性和用户体验。
229 0
|
前端开发
React给antd中TreeSelect组件左侧加自定义图标icon
本文介绍了如何在React中为Ant Design的TreeSelect组件的每个树节点添加自定义图标,并解决了因缺少key属性而导致的警告问题,展示了如何通过递归函数处理treeData数据并为每个节点添加图标。
856 2
React给antd中TreeSelect组件左侧加自定义图标icon
|
前端开发 数据安全/隐私保护
react antd 实现修改密码(原密码,新密码,再次输入新密码,新密码增加正则复杂度校验)
文章介绍了如何在React项目中使用Ant Design实现一个修改密码的组件,包括原密码、新密码和再次输入新密码的表单项,并为新密码增加了正则表达式复杂度校验。
449 1
react antd 实现修改密码(原密码,新密码,再次输入新密码,新密码增加正则复杂度校验)

热门文章

最新文章

  • 1
    PHP 数组查找:为什么 `isset()` 比 `in_array()` 快得多?
    244
  • 2
    Java 中数组Array和列表List的转换
    895
  • 3
    JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
    674
  • 4
    通过array.reduce()实现数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式、聚合统计、处理树结构数据和性能优化,reduce()的使用详解(附实际应用代码)
    1477
  • 5
    通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
    600
  • 6
    通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
    434
  • 7
    多维数组操作,不要再用遍历循环foreach了!来试试数组展平的小妙招!array.flat()用法与array.flatMap() 用法及二者差异详解
    259
  • 8
    别再用双层遍历循环来做新旧数组对比,寻找新增元素了!使用array.includes和Set来提升代码可读性
    264
  • 9
    Array.forEach实战详解:简化循环与增强代码可读性;Array.forEach怎么用;面对大量数据时怎么提高Array.forEach的性能
    166
  • 10
    深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
    680