在react中读取excel文件

2024-05-04

我正在尝试读取 excel 文件并使用 XLSX 将其转换为 JSON 格式,但无法做到这一点。当文件位于本地计算机上时,任何人都可以建议转换方法吗?


通过输入选择您本地机器的 Excel 表。在那之后,
您的 Excel 数据将显示为 JSON 字符串。

function Upload() {
    const fileUpload = (document.getElementById('fileUpload'));
    const regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xls|.xlsx)$/;
    if (regex.test(fileUpload.value.toLowerCase())) {
        let fileName = fileUpload.files[0].name;
        if (typeof (FileReader) !== 'undefined') {
            const reader = new FileReader();
            if (reader.readAsBinaryString) {
                reader.onload = (e) => {
                    processExcel(reader.result);
                };
                reader.readAsBinaryString(fileUpload.files[0]);
            }
        } else {
            console.log("This browser does not support HTML5.");
        }
    } else {
        console.log("Please upload a valid Excel file.");
    }
}

function processExcel(data) {
    const workbook = XLSX.read(data, {type: 'binary'});
    const firstSheet = workbook.SheetNames[0];
    const excelRows = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[firstSheet]);

    console.log(excelRows);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Process Excel File</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.0/xlsx.full.min.js"></script>
</head>
<body>
<input class="upload-excel" type="file" id="fileUpload" onchange="Upload()"/>
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在react中读取excel文件 的相关文章

随机推荐

  • Sqoop mysql错误-通信链路故障

    尝试运行以下命令 sqoop import connect jdbc mysql 3306 home credit risk table bureau target dir home sqoop username root password
  • 你可以将 UIGestureRecognizer 附加到多个视图吗?

    UITapGestureRecognizer tapGesture UITapGestureRecognizer alloc initWithTarget self action selector tapTapTap self view1
  • IE 302 重定向无缓存标头问题

    发布信息后返回 302 重定向 此重定向旨在重新加载当前页面 这一切都工作正常 但 IE 在标头中添加了 No Cache Cache Control no cache 我们使用 Squid 来缓存我们的内容 并将其放在标头中绕过了鱿鱼 由
  • as3 事件 - 类型强制失败?

    我正在将事件从孩子发送到父母 swf 它工作正常 直到我使用预加载器 swf 加载父级 然后父级停止从子级获取事件 我现在收到此错误 TypeError Error 1034 Type Coercion failed cannot conv
  • 生成适用于不同时区和数据的计划

    我正在构建一个网络应用程序 指导人们早起 它会为用户生成七十天内的起床时间表 他们输入当前的上升时间和目标上升时间 然后 上升时间每周减少一定量 直到达到目标时间 用户必须登录网站并在预定时间 签到 考虑到当前登录用户的时区和夏令时 我对如
  • 如何在 Angular 6 中编辑环境变量而不重建?

    我通常将 API URL 设置为environment ts文件 我必须将相同的版本部署到具有不同 API URL 的多个客户端 目前我正在更改环境变量后进行单独的构建 有没有办法在构建后编辑环境变量 以便我可以为每个客户端提供相同的构建
  • 什么时候空值在列中“安全”?

    设计数据库时是否存在允许列为空与 3nf 规范化的一般经验法则 我有一个表 其中的列主要由空值 85 组成 但表大小不超过 10K 记录 不是很大 它主要用于日志记录和记录保存 因此大多数事务将是插入和选择 而不是更新 我试图同时考虑性能和
  • 如何删除 RadioListTile 上的内部填充,以便可以连续使用 3 个 RadioListTiles?

    我对 Flutter 和 Dart 还很陌生 我似乎找不到关于这个特定主题的任何提示 我想把 3RadioListTiles in a Row像这样 Row children Expanded child RadioListTile
  • 为什么 Node typescript 项目的 jasmine Karma 单元测试显示覆盖范围包括依赖项?

    正如题主所说 我们项目的代码覆盖率包括节点依赖 但请注意 当我们开发和发布它时 此 npm 依赖项的源代码也是项目的一部分 这是该项目的结构 root main project 业力 conf ts src 和其他要测试并生成覆盖率的文件
  • 反应本机无法解析模块“warnOnce”

    我的英语有点生疏 对此我很抱歉 当我在 iOS 模拟器上启动 React Native 项目时 出现错误 为了排除与我的代码的任何冲突 我开始了一个新项目 react native init demo react native start
  • 向图节点添加标签

    我使用 visnetwork 库制作了下图 library tidyverse library igraph set seed 123 n 15 data data frame tibble d paste 1 n relations da
  • cv2.cv.BoxPoints(rect) 返回什么?

    rect cv2 minAreaRect largest contour rect rect 0 0 self scale down rect 0 1 self scale down rect 1 0 self scale down rec
  • 为什么 PackageInfo.signatures 字段是一个数组,什么时候这里会出现除一个值之外的其他值?

    我正在相互检查包签名以确定它们是否不兼容 针对不同的密钥库进行编译 我注意到PackageInfo signatures几乎总是包含单个条目的集合 这对我来说很有意义 我使用调试或生产密钥库构建应用程序 这决定了包的签名 这是我此时对 ap
  • 当 mysql_connect 不适用于 IIS 上的 PHP 时,不会返回任何错误消息

    我是 PHP 和 MySQL 的新手 最近在已经运行 IIS v6 的 Windows Server 2003 服务器上安装了 PHP v5 3 10 和 MySQL v 5 5 21 PHP 运行 我已经从 MySQL 5 5 命令行客户
  • Spring Security - 基于令牌的 API 身份验证和用户/密码身份验证

    我正在尝试创建一个主要使用 Spring 提供 REST API 的 Web 应用程序 并尝试配置安全方面 我正在尝试实现这种模式 https developers google com accounts docs MobileApps h
  • Terraform 蓝图上的退出条件

    我想要一个地形蓝图 在顶部满足特定条件时退出 If the var available设置为 false 我希望蓝图停止一切并抛出错误 这个的语法是什么 我在任何地方的文档文件中都找不到它 terraform 中是否存在此功能 注意 此代码
  • 需要使用 python(selenium) 抓取通过 ajax 加载的表

    我有一个page https seahawks strmarketplace com Charter Seat Licenses Charter Seat Licenses aspx有一个表 表 id ctl00 ContentPlaceH
  • CUDA 矩阵加法时序,按行与按行比较按栏目

    我目前正在学习 CUDA 并正在做一些练习 其中之一是实现以 3 种不同方式添加矩阵的内核 每个元素 1 个线程 每行 1 个线程和每列 1 个线程 矩阵是方阵 并被实现为一维向量 我只需用以下命令对其进行索引 A N row col 直觉
  • Django 中级模型用户

    我想创建一个模型 其中用户拥有多家公司一定数量的股份 看来我应该使用 Django 中间模型关系 但我不确定如何将中间模型应用到内置 Django 用户模型 目前 公司与股东 用户 之间存在多对多关系 如何为每个特定的公司股东关系添加股份数
  • 在react中读取excel文件

    我正在尝试读取 excel 文件并使用 XLSX 将其转换为 JSON 格式 但无法做到这一点 当文件位于本地计算机上时 任何人都可以建议转换方法吗 通过输入选择您本地机器的 Excel 表 在那之后 您的 Excel 数据将显示为 JSO