js 前端 解析excel文件【.xlsx文件】信息内容

需求: 从excel文件中解析里面的内容

1、使用插件xlsx.full.min.js,地址:https://unpkg.com/xlsx/dist/xlsx.full.min.js

实例:

	<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script><input type="file" id="input_btn" /><div id="excel_show"></div><script>const inputbtn = document.getElementById('input_btn');const excelshow = document.getElementById('excel_show');inputbtn.addEventListener('change', function(e) {const file = e.target.files[0];const reader = new FileReader();reader.onload = function(e) {const data = new Uint8Array(e.target.result);const workbook = XLSX.read(data, { type: 'array' });//表格对象// workbook.SheetNames;  //获取到所有表格const firstSheetName = workbook.SheetNames[0]; //取第一张表const worksheet = workbook.Sheets[firstSheetName];//1、获得 **.xlsx文件 的json格式内容//const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });//excelshow.innerHTML = JSON.stringify(jsonData);//2、将表格数据转换为html代码let html = XLSX.utils.sheet_to_html(worksheet);console.log('html====',html)//将html代码渲染到指定容器excelshow.innerHTML = html;};reader.readAsArrayBuffer(file);});</script>

例如:在这里插入图片描述
返回展示的结果:

[[“序号”,“名字”,“id”,“数据”],[1,“aa”,111,11111],[2,“bb”,222,22222],[3,“cc”,333,33333]]
即:
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于inet_addr()中的参数不能是 sring类型的 只能是 string类型变量.c_str()

源码展示&#xff1a; extern in_addr_t inet_addr (const char *__cp) __THROW inet_addr中的参数是const char *类型的 定义一个string 类型的ip 使用这个inet_addr()接口 local.sin_addr.s_addr inet_addr(ip_.c_str()); local.sin_addr.s_addr inet_addr(&ip_);…

(超全)Kubernetes 的核心组件解析

引言 在现代软件开发和运维的世界中&#xff0c;容器化技术已经成为一种标志性的解决方案&#xff0c;它为应用的构建、部署和管理提供了前所未有的灵活性和效率。然而&#xff0c;随着应用规模的扩大和复杂性的增加&#xff0c;单纯依靠容器本身来管理这些应用和服务已不再足够…

零基础入门转录组数据分析——机器学习算法之SVM-RFE(筛选特征基因)

零基础入门转录组数据分析——机器学习算法之SVM-RFE&#xff08;筛选特征基因&#xff09; 目录 零基础入门转录组数据分析——机器学习算法之SVM-RFE&#xff08;筛选特征基因&#xff09;1. SVM-RFE基础知识2. SVM-RFE&#xff08;Rstudio&#xff09;——代码实操2. 1 数据…

VS Code C/C++ MSVC编译器

官方教程 通过快捷方式打开VS Code是编译不了的,需要对tasks.json修改(Tasks: Configure default build task) 先创建tasks.json 复制这段配置到tasks.json,记得修改VsDevCmd.bat的路径 {"version": "2.0.0","windows": {"options"…

Gradle 统一管理依赖

BOM 介绍 BOM 是 Bill of Material 的简写&#xff0c;表示物料清单。BOM 使我们在使用 Maven 或 Gradle 构建项目时对于依赖版本的统一变得更加规范&#xff0c;升级依赖版本更容易。 比如我们使用 SpringBoot 和 SpringCloud 做项目时&#xff0c;可以使用他们发布的 BOM …

ARM 离线安装k8s + harbor私有镜像库(麒麟)

目录 1.1 K8S 服务集群安装部署 1.1.1 主机配置说明 1.1.2 主机名称、host配置 1.1.3 防火墙配置 1.1.4 关闭selinux 1.1.5 配置内核转发及网桥过滤 1.1.6 关闭SWAP分区 1.1.7 安装ipset及ipvsadm 1.1.8 时间同步(麒麟系统自带了chronyd) 1.1.9 docker安装 1.1.10 …

用户画像系列——Spark任务调优实践

在画像标签的加工和写入hbase中&#xff0c;我们采用了spark来快速进行处理和写入。但是在实际线上运行的过程中&#xff0c;仍然遇到了不少问题&#xff0c;下面来总结下遇到的一些问题 1.数据倾斜问题 其实spark 数据倾斜思路和hive、mapreduce 数据倾斜思路处理类似&…

ELK对业务日志进行收集

ELK对业务日志进行收集 下载httpd 进到文件设置收集httpd的文件进行 设置 编辑内容 用于收集日志的内容 将日志的内容发送到实例当中 input {file{path > /etc/httpd/logs/access_logtype > "access"start_position > "beginning"}file{path &g…

基于SpringCloud alibaba的流媒体视频点播平台

基于SpringCloud alibaba的流媒体视频点播平台 前言整体架构具体实现视频播放 总结 先把项目地址放这 》基于SpringCloud alibaba的流媒体视频点播平台《 然后咱们来看看这个项目是干啥的。 前言 今天和大家分享一个项目&#xff0c;基于SpringCloud alibaba的流媒体视频点…

嵌入式单片机中在线调试工具使用方法

大家好,相信很多小伙伴都听说过,或者用过SystemView这款工具。 它是一个可以在线调试嵌入式系统的工具,它可以分析RTOS有哪些中断、任务执行了,以及这些中断、任务执行的先后关系。 还可以查看一些内核对象持有和释放的时间点,比如信号量、互斥量、事件、消息队列等,这在…

紫辉创投开启Destiny of Gods首轮投资,伯乐与千里马的故事仍在继续

近日&#xff0c;上海紫辉创业投资有限公司&#xff08;以下简称“紫辉创投”&#xff09;宣布开启GameFi链游聚合平台Destiny of Gods首轮投资500,000美金&#xff0c;并与其达成全面战略及业务层合作&#xff0c;双方将协同布局链上生态&#xff0c;共同推动链游行业健康发展…

开发板与ubuntu不能ping通怎么办?

TOC 第一步&#xff1a;VMware 设置 打开 VMware Workstation Pro 里的 虚拟机 -> 设置 设置网络适配器为桥接模式。这里不要勾选“复制物理网络连接状态”。 因为电脑是 WiFi 上网&#xff0c;所以需要添加一个网络适配器并设置成 NAT 模式&#xff0c;供虚拟机上网。具…

C#:枚举及位标志周边知识详解(小白入门)

文章目录 枚举为什么要有枚举?枚举的性质设置默认类型和显式设置成员的值 位标志(重要)位标记是什么及作用位标志周边知识HasFlag判断是否有该功能枚举前面加Flags的好处 关于枚举的更多知识using static简化代码获取枚举成员的字面量 枚举 为什么要有枚举? 为了增加代码的…

ComfyUI 实战教程:一键扩图

大家好&#xff0c;我是每天分享AI应用的萤火君&#xff01; 本文给大家分享一个很有用的技术&#xff1a;AI扩图。所谓扩图就是扩展图像的边界&#xff0c;在图像的边界外新增更多画面元素&#xff0c;这不仅仅是扩大图像的尺寸&#xff0c;还要让新添加的部分与原有图像的内…

xss漏洞(二,xss入靶场搭建以及简单利用)

本文仅作为学习参考使用&#xff0c;本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 一&#xff0c;环境搭建。 使用工具&#xff1a;PHP study&#xff0c;dvwa靶场。 1&#xff0c;GitHub上下载dvwa到PHP study的WWW文件夹内&#xff0c;并解压。 dvwa下载地址 …

区块链核心概念与技术架构简介

引言 区块链&#xff0c;一种分布式账本技术&#xff0c;不仅为数字货币提供了基础设施&#xff0c;更在金融、供应链、物联网等多个领域展现出广泛的应用前景。区块链技术被认为是继蒸汽机、电力、互联网之后&#xff0c;下一代颠覆性的核心技术。 如果说蒸汽机释放了人们的…

[网鼎杯 2020 青龙组]AreUSerialz1

打开题目 熟悉的php&#xff0c;代码审计 可知这是一题反序列化类型的题目。 按照常规方法&#xff0c;首先&#xff0c;我们先将代码复制到本地进行序列化构造&#xff0c; 根据代码逻辑分析&#xff0c;咱们可知 function __construct() { $op "1"…

深入理解操作系统--绪论

文章目录 概述操作系统的基本概念多用户系统用户和组进程 小结 概述 最近在读操作系统&#xff0c;发现一些新的概念。写出来&#xff0c;让自己印象更深&#xff0c;希望也帮助一些不懂的朋友&#xff1b;但愿有所帮助吧。 操作系统的基本概念 计算机都包含操作系统的基本程…

Docker 安装 GitLab教程

本章教程,主要介绍如何在Docker 中安装GitLab。 GitLab 是一个开源的 DevOps 平台,提供了一整套工具,用于软件开发生命周期的各个阶段,从代码管理到 CI/CD(持续集成和持续交付/部署),再到监控和安全分析。 一、拉取镜像 docker pull gitlab/gitlab-ce:latest二、创建 G…

Photoshop 运行时常见问题及修复

安装完成后无法运行 出现“由于找不到 MSVCP140.dll&#xff0c;无法继续执行代码。重新安装程序可能会解决此问题。”等问题时&#xff0c;可以从网上搜索 Microsoft Visual C 运行库&#xff0c;下载并安装&#xff0c;一般可解决问题。 暂存盘不够的问题 软件在运算过程中会…