利用SheetJS在前端解析Excel读取数据并赋值给组件

xlsx.full.min.js‌是一个由SheetJS出品的JavaScript工具包,专门设计用于在前端环境中读取和导出Excel文件。它支持多种格式,包括xls、xlsx和ods等,极大地简化了在Web应用中处理Excel数据的过程‌。

使用xlsx.full.min.js的基本步骤如下:

  1. 引入库文件:在HTML文件中引入xlsx.full.min.js 库。
  2. 读取Excel文件:通过HTML的<input>元素选择文件后,使用JavaScript监听文件变化时间,获取文件内容。
  3. 处理数据:将读取到的数据转化成JSON格式或其它所需格式进行处理。

下面演示如何在前端页面上解析excel数据并赋值给组件

1. 下载 xlsx.full.min.js 第三方库,并在页面引入

<#-- 前端解析 excel 插件-->
<script type="text/javascript" src="/dist/xlsx.full.min.js"></script>

 2. 创建一个文件类型的输入框<input type="file">, 供用户上传文件。onchange是对该控件进行监听,有文件上传时,调用自定义 inDateByExcel() 方法。

  <td colspan="2"><label>一键导入</label><input type="file" onchange="inDateByExcel(event);"/></td>

3. 编写自定义方法  inDateByExcel(),处理数据

// 一键导入
window.inDateByExcel = function (e) {var file = e.target.files[0];   // 得到上传的文件var type = file.name.split('.');  // 得到一个数组存放文件名和文件后缀// 判断上传的文件是否是excel 类型,不是则提示if (type[type.length - 1] !== 'xlsx' && type[type.length - 1] !== 'xls') {layer.alert('只能导入excle文件', { title: '上传失败', icon: 5, time: 3000);} else {var reader = new FileReader();reader.readAsArrayBuffer(file);reader.onload = function (e) {var data = new Uint8Array(reader.result);var workbook = XLSX.read(data, {type: 'array'});// 假设我们只读取第一个工作表var firstSheetName = workbook.SheetNames[0];var worksheet = workbook.Sheets[firstSheetName];// 将工作表转换为JSONvar json = XLSX.utils.sheet_to_json(worksheet);$.each(json, function (i, v) {//     console.log(v)// 给单选按钮赋值$('input[type="radio"][name="payType"][value="'+ v.付款方式 +'"]').prop('checked', true);  // 付款方式$('#username').val(v.姓名);  // 姓名$('#phone').val(v.电话);  // 电话$('#address').val(v.地址);  // 地址// 如果 excel 里的字段没有数据,在浏览器打印出来是找不到该字段的,if (v.产品编码 != 'undefined') {        // 产品编码非必填项$('#productCode').val(v.产品编码);  // 产品编码}form.render();  // layui的下拉框、单选按钮类型改变值后需要重新渲染,这里是所有类型都重新渲染});}}}

经过上述步骤就,就实现了在前端页面解析excel数据。

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

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

相关文章

软件设计师-上午题-15 计算机网络(5分)

计算机网络题号一般为66-70题&#xff0c;分值一般为5分。 目录 1 网络设备 1.1 真题 2 协议簇 2.1 真题 3 TCP和UDP 3.1 真题 4 SMTP和POP3 4.1 真题 5 ARP 5.1 真题 6 DHCP 6.1 真题 7 URL 7.1 真题 8 浏览器 8.1 真题 9 IP地址和子网掩码 9.1 真题 10 I…

nodejs批量修改word文档目录样式

工作中遇到一个需求:写个nodejs脚本,对word文档(1000+个)的目录页面进行美化。实现过程遇到不少麻烦,在此分享下。 整体思路 众所周知,Docx格式的Word文档其实是个以xml文件为主的zip压缩包,所以,页面美化整体思路是:先将文档后缀名改为zip并解压到本地,然后将关键的…

MathType在Word中的安装与配置记录

一、记录过程 1.MathType安装包下载 可直接下载本人已经安装过的安装包&#xff0c;亲测可以使用&#xff0c;下载链接如下&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1g-iOgKIqzSNz0E5rEUryug 提取码&#xff1a;1kb3 2.安装后配置 word中会出现mathtype的选项…

无人机之中继通信技术篇

一、定义与原理 无人机中继通信技术是指通过无人机搭载中继设备&#xff0c;将信号从一个地点传输到另一个地点&#xff0c;从而延长通信距离并保持较好的通信质量。其原理类似于传统的中继通信&#xff0c;即在两个终端站之间设置若干中继站&#xff0c;中继站将前站送来的信号…

轴流风机和后倾式风机的安装要求

后向离心风机风压大&#xff0c;风量足&#xff0c;安装方便。因为不需要蜗壳&#xff0c;所以风道往往需要自行设计&#xff0c;而风道的合理与否&#xff0c;大大影响了后向离心风机的效率。那么后向离心风机的安装技巧有哪些&#xff1f;怎样达到风机的最佳使用效果呢&#…

植物神经紊乱不用怕,这些维生素来帮你!

你是否经常感到身体疲惫、情绪波动大、心悸、胸闷&#xff1f;这可能是植物神经紊乱在作祟。别担心&#xff0c;通过合理的维生素补充&#xff0c;可以有效缓解症状&#xff0c;提升生活质量。今天&#xff0c;我们就来聊聊植物神经紊乱患者应该补充哪些维生素。 &#x1f50d…

使用C语言进行信号处理:从理论到实践的全面指南

1. 引言 在现代操作系统中&#xff0c;信号是一种进程间通信机制&#xff0c;它允许操作系统或其他进程向一个进程发送消息。信号可以用来通知进程发生了一些重要事件&#xff0c;如用户请求终止进程、硬件异常、定时器超时等。掌握信号处理技术对于开发健壮、高效的系统程序至…

LabVIEW配电产品精度测试系统

开发了一种基于LabVIEW平台的配电产品精度测试系统&#xff0c;通过自动化测试流程实现更高的测试准确性与效率。系统采用串口和TCP通信技术&#xff0c;与多功能交流采样变送器和配电设备无缝数据交互&#xff0c;提升了测试工作的可靠性和一致性。 一、项目背景 在配电产品…

基于JAVA SpringBoot和Vue社区网格化管理服务平台设计

摘要 本文旨在设计并实现一个基于Java SpringBoot和Vue技术的社区网格化管理服务平台。该平台主要包括用户功能和管理员功能两大部分&#xff0c;用户功能涵盖单位管理、问卷调查、论坛讨论、公告查看等&#xff1b;管理员功能则包括单位管理、基础数据维护、帖子和公告类型管…

鸢尾博客项目开源

1.博客介绍 鸢尾博客是一个基于Spring BootVue3 TypeScript ViteJavaFx的客户端和服务器端的博客系统。项目采用前端与后端分离&#xff0c;支持移动端自适应&#xff0c;配有完备的前台和后台管理功能。后端使用Sa-Token进行权限管理,支持动态菜单权限&#xff0c;服务健康…

IBinder源码分析

基础概念 binder 是 Android 中主要的跨进程通信方式&#xff0c;binder 驱动和 service manager 分别相当于网络协议中的路由器和 DNS&#xff0c;并基于 mmap 实现了 IPC 传输数据时只需一次拷贝。binder 包括 BinderProxy、BpBinder 等各种 Binder 实体&#xff0c;以及对 …

PDF Reader Pro for mac激活版 PDF编辑阅读器

PDF Reader Pro阅读器是一款用户必备的集管理、编辑、转换、阅读功能于一体的专业的全能PDF阅读专家。快速、易用、强大&#xff0c;让您出色完成 PDF 工作&#xff0c;深受全球9000万用户的喜爱。用户可轻松使用PDF Reader Pro进行文档阅读、编辑、注释、填写Form表单、转换、…

图像分割从基础到进阶:阈值化、K-means和Mean-Shift算法的应用

图像分割是计算机视觉中的一项关键技术&#xff0c;用来将图像划分为若干个 有意义 的区域&#xff0c;以便后续的图像处理和分析工作。根据任务的不同&#xff0c;图像分割可以进一步细分为语义分割、实例分割和全景分割&#xff1a; 语义分割 (Semantic Segmentation) 对图像…

生产消费者模型

线程同步 互斥锁(互斥量)条件变量生产/消费者模型 一、互斥锁 C11提供了四种互斥锁&#xff1a; mutex&#xff1a;互斥锁。timed_mutex&#xff1a;带超时机制的互斥锁。recursive_mutex&#xff1a;递归互斥锁。recursive_timed_mutex&#xff1a;带超时机制的递归互斥锁…

国标GB28181视频平台EasyCVR私有化视频平台工地防盗视频监控系统方案

一、方案背景 在当代建筑施工领域&#xff0c;安全监管和防盗监控是保障工程顺利进行和资产安全的关键措施。随着科技进步&#xff0c;传统的监控系统已不足以应对现代工地的安全挑战。因此&#xff0c;基于国标GB28181视频平台EasyCVR的工地防盗视频监控系统应运而生&#xf…

WindowsDocker安装到D盘,C盘太占用空间了。

Windows安装 Docker Desktop的时候,默认位置是安装在C盘,使用Docker下载的镜像文件也是保存在C盘,如果对Docker使用评率比较高的小伙伴,可能C盘空间,会被耗尽,有没有一种办法可以将Docker安装到其它磁盘,同时Docker的数据文件也保存在其他磁盘呢? 答案是有的,我们可以…

【AI日记】24.11.01 LangChain、openai api和github copilot

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】 工作 工作1 内容&#xff1a;学习deeplearning.ai的免费课程地址&#xff1a;LangChain Chat with Your DataB站地址&#xff1a;https://www.bilibili.com/video/BV148411D7d2github代码&#xff1a;https:…

HTML静态网页成品作业(HTML+CSS)——花主题介绍网页设计制作(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品演示 三、代…

WinCC V7.5 SP1VBS全局变量的使用

1 <概述> 在 WinCC 使用过程中&#xff0c;有很多应用场合需要把获得的数据保存下来&#xff0c;在其它事件 中来使用&#xff0c;例如在 WinCC 运行后去读取自定义的配置文件中的参数&#xff0c;在控制相应设 备时需要根据这些参数来确定控制方式&#xff0c;那么就需…

Charles抓包_Android

1.下载地址 2.破解方法 3.安卓调试办法 查看官方文档&#xff0c;Android N之后抓包要声明App可用User目录下的CA证书 3.1.在Proxy下进行以下设置&#xff08;路径Proxy->Proxy Settings&#xff09; 3.1.1.不抓包Windows&#xff0c;即不勾选此项&#xff0c;免得打输出不…