javascript导入excel文件

        导入文件用到一个 xlsx.core.js 的包。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script type="text/javascript" src="./xlsx.core.min.js"></script><title>Document</title>
</head><body><input type="file" id="file" style="display:none;" /><button onclick="importFile()">导入</button>
</body>
<script type="text/javascript" src="./index.js"></script>
</html>

        隐藏 input 框,加一个 button 按钮可以方便的调节按钮的样式。

function importFile() {console.log('导入');document.getElementById('file').click();
}document.getElementById('file').addEventListener('change', function (e) {let files = e.target.files;if (files.length == 0) return;let f = files[0];if (!/\.xlsx$/g.test(f.name)) {alert('仅支持读取xlsx格式!');return;}e.target.value = "" // 清空上一次上传的数据,防止第二次无法上传readWorkbookFromLocalFile(f, function (workbook) {readWorkbook(workbook);});
});function readWorkbookFromLocalFile(file, callback) {let reader = new FileReader();reader.onload = function (e) {let data = e.target.result;let workbook = XLSX.read(data, { type: 'binary' });if (callback) callback(workbook);};reader.readAsBinaryString(file);
}function readWorkbook(workbook) {let sheetNames = workbook.SheetNames; // 工作表名称集合console.log(sheetNames, 'sheetNames');let worksheet = workbook.Sheets[sheetNames[0]]; // 读取第一张sheetconsole.log(worksheet, 'worksheet');let json = XLSX.utils.sheet_to_json(worksheet);// let json = XLSX.utils.sheet_to_json(worksheet, { range: 1 }) // range: 1 可以设置是从第几行开始读,不设置从第一行开始读console.log(json, 'json');
}   

        文件信息。

        页面上取值。

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

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

相关文章

[Python]用Qt6和Pillow实现截图小工具

本文章主要讲述的内容是&#xff0c;使用python语言借助PyQt6和Pillow库进行简单截图工具的开发&#xff0c;含义一个简单的范围裁剪和软件界面。 主要解决的问题是&#xff0c;在高DPI显示屏下&#xff0c;坐标点的偏差导致QWidget显示图片不全、剪裁范围偏差问题。 适合有一点…

性能飙升50%,react-virtualized-list如何优化大数据集滚动渲染

在处理大规模数据集渲染时&#xff0c;前端性能常常面临巨大的挑战。本文将探讨 react-virtualized-list 库如何通过虚拟化技术和 Intersection Observer API&#xff0c;实现前端渲染性能飙升 50% 的突破&#xff01;除此之外&#xff0c;我们一同探究下该库还支持哪些新的特性…

前端传参数后端变量类型能够接受到List却无法接收到值

问题描述 今天写了个接口&#xff0c;下图所示 ReqVO里是这样的&#xff1a; 然后前端去请求&#xff0c;从请求结果中看发现这里值是在的&#xff08;有经验的可能就看出来了otherInfo.id: 这样以参数后端是接收不到的&#xff0c;但是当时没发现&#xff09; 传进来后端…

第二十六章CSS3续~

3.CSS3渐变属性 CSS3渐变(gradients)可以在两个或多个指定的颜色之间显示平稳的过渡。 以前&#xff0c;我们必须使用图像来实现这些效果。但是&#xff0c;通过使用CSS3渐变(gradients)&#xff0c;可以减少下载的事件和宽带的使用。由于渐变(gradient)是由浏览器生成的&…

初学者如何对大模型进行微调?

粗略地说&#xff0c;大模型训练有四个主要阶段&#xff1a;预训练、有监督微调、奖励建模、强化学习。 预训练消耗的时间占据了整个训练pipeline的99%&#xff0c;其他三个阶段是微调阶段&#xff0c;更多地遵循少量 GPU 和数小时或数天的路线。预训练对于算力和数据的要求非…

java第二十课 —— 面向对象习题

类与对象练习题 编写类 A01&#xff0c;定义方法 max&#xff0c;实现求某个 double 数组的最大值&#xff0c;并返回。 public class Chapter7{public static void main(String[] args){A01 m new A01();double[] doubleArray null;Double res m.max(doubleArray);if(res !…

【Qt知识】disconnect

在Qt框架中&#xff0c;disconnect函数用于断开信号与槽之间的连接。当不再需要某个信号触发特定槽函数时&#xff0c;或者为了防止内存泄漏和重复执行问题&#xff0c;你可以使用disconnect来取消这种关联。disconnect函数的基本用法可以根据不同的需求采用多种形式&#xff0…

【Python学习1】matplotlib和pandas库绘制人口数变化曲线

✍&#x1f3fb;记录学习过程中的输出&#xff0c;坚持每天学习一点点~ ❤️希望能给大家提供帮助~欢迎点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;指点&#x1f64f; 一、Python库说明 Matplotlib Matplotlib是一个功能强大的Python 2D绘图库&#xff0c;它允…

【Linux网络】传输层协议 - UDP

文章目录 一、传输层&#xff08;运输层&#xff09;运输层的特点复用和分用再谈端口号端口号范围划分认识知名端口号&#xff08;Well-Know Port Number&#xff09;两个问题① 一个进程是否可以绑定多个端口号&#xff1f;② 一个端口号是否可以被多个进程绑定&#xff1f; n…

最大的游戏交流社区Steam服务器意外宕机 玩家服务受影响

易采游戏网6月3日消息&#xff1a;众多Steam游戏玩家报告称&#xff0c;他们无法访问Steam平台上的个人资料、好友列表和社区市场等服务。同时&#xff0c;社区的讨论功能也无法正常使用。经过第三方网站SteamDB的确认&#xff0c;&#xff0c;这一现象是由于Steam社区服务器突…

德国西门子论未来质量管理 - 如何与明天相遇?

未来制造业的质量 -- 如何用软件方案满足质量要求 作者&#xff1a;Bill Butcher 翻译&编辑&#xff1a;数字化营销工兵 【前言】在Frost&Sullivan最近发表的一份白皮书中&#xff0c;他们讨论了制造业的质量投资。质量是制造过程的关键要素&#xff0c;但似乎比其他…

《精通ChatGPT:从入门到大师的Prompt指南》大纲目录

第一部分&#xff1a;入门指南 第1章&#xff1a;认识ChatGPT 1.1 ChatGPT是什么 1.2 ChatGPT的应用领域 1.3 为什么需要了解Prompt 第2章&#xff1a;Prompt的基本概念 2.1 什么是Prompt 2.2 好Prompt的特征 2.3 常见的Prompt类型 第二部分&#xff1a;Prompt设计技巧 第…

MySQL报ERROR 2002 (HY000)解决

今天在连接客户服务器时MySQL的时候报: ERROR 2002 (HY000): Can’t connect to local MySQL server through socket ‘/tmp/mysql/mysql.sock’ (2) [rootXXX ~]# mysql -uroot -p Enter password: ERROR 2002 (HY000): Can’t connect to local MySQL server through socket…

【高校科研前沿】新疆生地所陈亚宁研究员团队在GeoSus发文:在1.5°C和2°C全球升温情景下,中亚地区暴露于极端降水的人口增加

目录 文章简介 1.研究内容 2.相关图件 3.文章引用 文章简介 论文名称&#xff1a;Increased population exposures to extreme precipitation in Central Asia under 1.5 ◦C and 2 ◦C global warming scenarios&#xff08;在1.5C和2C全球变暖情景下&#xff0c;中亚地区…

服务器硬件基础知识学习

服务器硬件基础知识涵盖了从CPU到存储&#xff0c;再到网络连接和总线技术等关键组件。 1. 处理器 - 两大流派&#xff1a;我们常用的处理器主要分为Intel和AMD两大阵营。Intel的Xeon系列和AMD的EPYC系列都是专为服务器设计的&#xff0c;它们支持多核处理&#xff0c;能够应对…

【ARFoundation自学05】人脸追踪(AR Face manager)实现

1. 修改摄像机朝向渲染方式-选中user 这个方式就会调用前置摄像头 2 创建 AR Session、XR Origin&#xff0c;然后在XR Origin上面添加组件 注意&#xff1a;XR Origin 老版本仍然叫 AR Session Origin 接下来在XR Origin上面添加AR Face Manager组件&#xff0c;如下图&am…

【算法速查】万字图解带你快速入门八大排序(下)

君兮_的个人主页 即使走的再远&#xff0c;也勿忘启程时的初心 C/C 游戏开发 Hello,米娜桑们&#xff0c;这里是君兮_&#xff0c;首先在这里祝大家中秋国庆双节同乐&#xff01;&#xff01;抓住假期的小尾巴&#xff0c;今天来把算法速查的八大排序的后续写完&#xff0c;当…

【数据结构】C语言实现二叉树的基本操作——二叉树的遍历(先序遍历、中序遍历、后序遍历)

C语言实现二叉树的基本操作 导读一、二叉树的遍历二、先序遍历三、中序遍历四、后序遍历五、结点序列六、递归算法与非递归算法的转化结语 导读 大家好&#xff0c;很高兴又和大家见面啦&#xff01;&#xff01;&#xff01; 通过前面的介绍&#xff0c;我们已经认识了二叉树…

一文搞懂常见的数据拆分方案

常见的几种数据拆分方案 1、客户端分片 直接在应用层实现读取分片规则&#xff0c;解析规则&#xff0c;根据规则实现切分逻辑。 这种方案优缺点&#xff1a; 侵入业务(缺点)&#xff1b; 实现简单&#xff0c;适合快速上线&#xff0c;容易定位问题&#xff1b; 对开发人员…

QT 信号和槽 一对多关联示例,一个信号,多个槽函数响应,一个信号源如何绑定多个槽函数

在窗体里放置一个单行文本编辑控件&#xff08;QLineEdit&#xff09;、一个标签控件&#xff08;QLabel&#xff09;和一个文本浏览控件&#xff08;QTextBrowser&#xff09;&#xff0c;在单行文 本编辑控件里的文本被编辑时&#xff0c;标签控件和文本浏览控件都会同步显示…