当前位置: 首页 > news >正文

纯前端实现导入excel数据

准备工作 - 下载 xlsx

npm install xlsx

下面直接上代码👇

<template><div><input type="file" accept=".xlsx, .xls" @change="handleClick"></div>
</template><script lang='ts' setup>
import * as XLSX from 'xlsx'const handleClick = async (e) => {const res = await readerData(e.target.files[0])console.log(res); // 获取的数据格式 { header: [], results: [{}] }
}// 纯前端导入excel
const readerData = (rawFile) => {return new Promise((resolve, reject) => {// 创建一个文件读取的实例const reader = new FileReader()reader.onload = e => { // onload是加载完实例后执行(异步)const data = e.target.resultconst workbook = XLSX.read(data, { type: 'array' })// 获取一张表的表名const firstSheetName = workbook.SheetNames[0]// 根据表名拿到表里面的内容const worksheet = workbook.Sheets[firstSheetName]// 解析成jsonconst results = XLSX.utils.sheet_to_json(worksheet)// 获取表头数据const header = getHeaderRow(worksheet)resolve({ header, results })}// 读取成一个Buffer格式文件reader.readAsArrayBuffer(rawFile)})
}// 获取表头数据
const getHeaderRow = (sheet) => {const headers = []const range = XLSX.utils.decode_range(sheet['!ref'])let Cconst R = range.s.r/* start in the first row */for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]/* find the cell in the first row */let hdr = 'UNKNOWN ' + C // <-- replace with your desired defaultif (cell && cell.t) hdr = XLSX.utils.format_cell(cell)headers.push(hdr)}return headers
}
</script>

相关文章:

纯前端实现导入excel数据

准备工作 - 下载 xlsx npm install xlsx下面直接上代码&#x1f447; <template><div><input type"file" accept".xlsx, .xls" change"handleClick"></div> </template><script langts setup> import * a…...

Matlab下载许可证文件 教程(在账号有许可证的前提下)

文章目录 Part.I IntroductionPart.II 许可证文件过期解决方案Chap.I 使用 Internet 自动激活Chap.II 在不使用 Internet 的情况下手动激活 Part.I Introduction 本文主要介绍&#xff0c;在 Mathwork 账号有许可证的前提下&#xff0c;下载许可证的操作流程。 好久没有用 Mat…...

AI 绘画 | Stable Diffusion 电商模特

前言 上一篇文章讲到如何给人物更换背景和服装。今天主要讲电商模特,就是服装电商们的固定服装产品图片如何变成真人模特穿上的固定服装产品效果图。如果你掌握了 《AI 绘画 | Stable Diffusion 人物 换背景|换服装》,这篇文章对你来说,上手会更轻松。 教程 提取服装蒙版…...

vue面试题整理(1.0)

一、对MVC&#xff0c;MVP&#xff0c;MVVM的理解 三者都是项目的架构模式&#xff08;不是类的设计模式&#xff09;&#xff0c;即&#xff1a;一个项目的结构&#xff0c;如何分层&#xff0c;不同层负责不同的职责。 1.MVC MVC的出现是用在后端&#xff08;全栈时代&…...

PyQt基础_007_ 按钮类控件QCombox

import sys from PyQt5.QtCore import * from PyQt5.QtGui import * from PyQt5.QtWidgets import *class ComboxDemo(QWidget):def __init__(self, parentNone):super(ComboxDemo, self).__init__(parent)self.setWindowTitle("combox 例子") self.resize(300, 90) …...

Android Wifi的扫描机制

Android Wifi 的扫描场景分为下面四种情况&#xff1a; 1.亮屏情况下&#xff0c;在Wifi settings界面&#xff0c;固定扫描&#xff0c;扫描时间为10s。 2.亮屏情况下&#xff0c;在非Wifi settings界面&#xff0c;二进制指数退避扫描&#xff0c;退避&#xff1a;interval…...

类 —— 友元、常/静态成员函数

类 类的大小 和结构体大小求法一致。但需注意&#xff0c;普通空类也会占用 1 字节大小&#xff0c;因为普通空类可以实例化对象。 而 抽象空类占 4 字节&#xff08;32 位机中&#xff09;&#xff0c;因为抽象空类中含有虚指针&#xff08;含有虚函数的非抽象空类同理&am…...

单页面应用

单页面应用 1.什么是SPA 多页面应用&#xff1a;每个页面都是独立的html文件&#xff0c;页面切换是整体刷新&#xff0c;需要重新加载html、css、JS等文件&#xff0c;容易实现搜索引擎&#xff0c;数据通过url、cookie、localStore传递。 单页面应用&#xff1a;多个页面是…...

六、ZooKeeper Java API操作

目录 1、引入maven坐标 2、节点的操作 这里操作Zookeeper的JavaAPI使用的是一套zookeeper客户端框架 Curator ,解决了很多Zookeeper客户端非常底层的细节开发工作 。 Curator包含了几个包:...

美甲美睫店预约会员管理小程序作用如何

美甲美睫是美业中较为重要的类目&#xff0c;主要以小摊、门店/连锁形式&#xff0c;随着线上化程度加深&#xff0c;传统线下美业店面临着困境&#xff0c;想要进一步增长及解决痛点&#xff0c;就需要线上数字化运营得到更多生意。 那么通过【雨科】平台搭建美甲美睫店小程序…...

Vue3为什么会推出组合式API

前言 大学前端入门学的vue2&#xff0c;工作了又用的React&#xff0c;现在想学习一下Vue3&#xff0c;开篇就介绍了组合式API&#xff0c;这和我认知里的vue2的选项式API区别还是蛮大的。本篇文章简单介绍一下组合式API。 什么是组合式API Vue 3引入了一种新的 API&#xf…...

windows11 phpstudy_pro php8.2 安装redis扩展

环境&#xff1a;windows11 phpstudy_pro php8.2.9 一、命令查看是否安装redis扩展 在对应网站中通过打开&#xff0c;&#xff0c;选择对应的PHP版本&#xff0c;用命令 php -m 查看自己的php 有没有redis扩展 上面如果有&#xff0c;说明已经安装了,如果没有安装&#xff1…...

中英双语大模型ChatGLM论文阅读笔记

论文传送门&#xff1a; [1] GLM: General Language Model Pretraining with Autoregressive Blank Infilling [2] Glm-130b: An open bilingual pre-trained model Github链接&#xff1a; THUDM/ChatGLM-6B 目录 笔记AbstractIntroductionThe design choices of GLM-130BThe …...

力扣题:字符串的反转-11.24

力扣题-11.24 [力扣刷题攻略] Re&#xff1a;从零开始的力扣刷题生活 力扣题1&#xff1a;151. 翻转字符串里的单词 解题思想&#xff1a;保存字符串中的单词即可 class Solution(object):def reverseWords(self, s):""":type s: str:rtype: str"&quo…...

NIO--07--Java lO模型详解

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 何为 IO?先从计算机结构的角度来解读一下I/o.再从应用程序的角度来解读一下I/O 阻塞/非阻塞/同步/异步IO阻塞IO非阻塞IO异步IO举例 Java中3种常见的IO模型BIO (Blo…...

OpenSSH 漏洞修复升级最新版本

Centos7系统ssh默认版本一般是OpenSSH7.4左右&#xff0c;低版本是有漏洞的而且是高危漏洞&#xff0c;在软件交付和安全扫描上是过不了关的&#xff0c;一般情况需要升级OpenSSH的最新版本 今天详细说下升级最新版本的处理过程&#xff08;认真看会发现操作很简单&#xff0c…...

【数据结构和算法】无限集中的最小数字

其他系列文章导航 Java基础合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、题目描述 二、题解 三、代码 四、总结 前言 这是力扣的2336题&#xff0c;难度为中等&#xff0c;解题方案有很多种&#xff0c;本文讲解我认为…...

SimpleDataFormat 非线程安全

目录 前言 正文 1.出现异常 2.解决方法1 3.解决方法2 总结 前言 SimpleDateFormat 类是 Java 中处理日期和时间格式化和解析的类&#xff0c;但它并不是线程安全的。这意味着多个线程不能安全地共享一个 SimpleDateFormat 实例进行日期和时间的解析和格式化。当多个…...

SpringBoot : ch12 多模块配置YAML文件

前言 当您使用SpringBoot框架进行项目开发时&#xff0c;通常需要配置一些参数和属性。在实际开发中&#xff0c;可能需要将这些配置参数分成多个不同的YAML文件&#xff0c;并将它们组织到不同的模块中。这样可以方便管理和维护配置文件&#xff0c;并且可以避免配置文件的冲…...

TensorRT之LeNet5部署(onnx方式)

文章目录 前言LeNet-5部署1.ONNX文件导出2.TensorRT构建阶段(TensorRT模型文件)&#x1f9c1;创建Builder&#x1f367;创建Network&#x1f36d;使用onnxparser构建网络&#x1f36c;优化网络&#x1f361;序列化模型&#x1f369;释放资源 3.TensorRT运行时阶段(推理)&#x…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

【Kafka】Kafka从入门到实战:构建高吞吐量分布式消息系统

Kafka从入门到实战:构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台,最初由LinkedIn开发,后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理,能够处理来自多个生产者的海量数据,并将这些数据实时传递给消费者。 Kafka核心特…...

Java并发编程实战 Day 11:并发设计模式

【Java并发编程实战 Day 11】并发设计模式 开篇 这是"Java并发编程实战"系列的第11天&#xff0c;今天我们聚焦于并发设计模式。并发设计模式是解决多线程环境下常见问题的经典解决方案&#xff0c;它们不仅提供了优雅的设计思路&#xff0c;还能显著提升系统的性能…...

基于 HTTP 的单向流式通信协议SSE详解

SSE&#xff08;Server-Sent Events&#xff09;详解 &#x1f9e0; 什么是 SSE&#xff1f; SSE&#xff08;Server-Sent Events&#xff09; 是 HTML5 标准中定义的一种通信机制&#xff0c;它允许服务器主动将事件推送给客户端&#xff08;浏览器&#xff09;。与传统的 H…...

信息收集:从图像元数据(隐藏信息收集)到用户身份的揭秘 --- 7000

目录 &#x1f310; 访问Web服务 &#x1f4bb; 分析源代码 ⬇️ 下载图片并保留元数据 &#x1f50d; 提取元数据&#xff08;重点&#xff09; &#x1f464; 生成用户名列表 &#x1f6e0;️ 技术原理 图片元数据&#xff08;EXIF 数据&#xff09; Username-Anarch…...