Vue实现纯前端导入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>

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

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

相关文章

Vue基础入门(四):Vue3快速开发模板

快速开发Vue的解决方案 ​ Vue 的开发需要的 node 环境&#xff0c;其实上在开发的过程中会遇到一些你想不到的问题&#xff0c;比如 npm工具的版本和 node 环境不匹配&#xff08;你把其他项目导入到自己的环境&#xff09; ​ vue-element-admin&#xff08;是一个官方提供…

git仓库如何撤销提交,恢复提交,重置版本命令

撤销提交&#xff1a; 要撤销最近一次提交&#xff08;未推送到远程仓库&#xff09;&#xff0c;可以使用以下命令&#xff1a; git reset HEAD^该命令将会把最后一次提交的修改从当前主分支中移除&#xff0c;并将这些修改的状态保留在本地工作目录中。 如果想要取消所有的…

HuggingFace学习笔记--利用API实现简单的NLP任务

目录 1--中文分类 1-1--使用预训练模型推理 1-2--基于预训练模型实现下游任务 2--中文填空 3--中文句子关系推断 1--中文分类 1-1--使用预训练模型推理 代码实例&#xff1a; import torch from datasets import load_dataset from transformers import BertTokenizer,…

leetCode 216.组合总和 III + 回溯算法 + 剪枝 + 图解 + 笔记

找出所有相加之和为 n 的 k 个数的组合&#xff0c;且满足下列条件&#xff1a; 只使用数字1到9每个数字 最多使用一次 返回 所有可能的有效组合的列表 。该列表不能包含相同的组合两次&#xff0c;组合可以以任何顺序返回 示例 1: 输入: k 3, n 7 输出: [[1,2,4]] 解释…

kotlin中sealed语句的使用

sealed 密封类是 Kotlin 中的一种特殊类别&#xff0c;它的主要作用是限制类的继承结构。密封类用于表示受限的类继承结构&#xff0c;即一个值只能有有限几种类型&#xff0c;而不能有任意类型。密封类通常用于表示一种有限集合的类型。 下面是密封类的主要特性和作用&#x…

pinia从入门到使用

pinia: 比vuex更适合vue3的状态管理工具&#xff0c;只保留了vuex 原有的 state, getters&#xff0c;actions 作用等同于 data computed methods&#xff0c;可以有多个 state 1.安装创建导入 安装&#xff1a;npm install pinia 或 yarn add pinia 创建stores/index.js inde…

Springboot2+WebSocket

一、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dependency> 二、添加配置 新增配置文件 config/WebSocketConfig.java import org.springframewo…

Jmeter接口测试和性能测试

目前最新版本发展到5.0版本&#xff0c;需要Java7以上版本环境&#xff0c;下载解压目录后&#xff0c;进入\apache-jmeter-5.0\bin\&#xff0c;双击ApacheJMeter.jar文件启动JMemter。 1、创建测试任务 添加线程组&#xff0c;右击测试计划&#xff0c;在快捷菜单单击添加-…

插入或更新学生信息的 SQL 语句

#! https://zhuanlan.zhihu.com/p/667794849 插入或更新学生信息的 SQL 语句 INSERT INTO student_info_table (id, name, age, gender, major, grade, attendance_state, last_attendance_time ) VALUES (?, ?, ?, ?, ?, ?, ?, ?) ON DUPLICATE KEY UPDATEname VALU…

【Python百宝箱】探索Python科学绘图宝库:交互与美学并存

前言 Python作为一种强大的编程语言&#xff0c;在数据科学领域展现出了巨大的优势。数据可视化作为数据科学的重要组成部分&#xff0c;为数据分析和解释提供了有力的工具。本文将深入探讨多个Python库&#xff0c;这些库不仅提供了丰富的绘图功能&#xff0c;而且能够满足不…

VSCode Vue 开发环境配置

Vue是前端开发中的重要工具与框架&#xff0c;可以保住开发者高效构建用户界面。 Vue2官方文档&#xff1a;https://v2.cn.vuejs.org/ Vue3官方文档&#xff1a;https://cn.vuejs.org/ Vue的安装和引用 Vue2的官方安装指南&#xff1a;https://v2.cn.vuejs.org/v2/guide/ins…

ESP32-Web-Server 实战编程-通过网页控制设备多个 GPIO

ESP32-Web-Server 实战编程-通过网页控制设备多个 GPIO 概述 上节 ESP32-Web-Server 实战编程-通过网页控制设备的 GPIO 讲述了如何通过网页控制一个 GPIO。本节实现在网页上控制多个 GPIO。 示例解析 前端设计 前端代码建立了四个 GPIO&#xff0c;如下死 GPIO 2 在前端的…

配置 Mantis 在 Windows 上的步骤

配置 Mantis Bug Tracker 在 Windows 上的步骤 Mantis Bug Tracker 是一款开源的缺陷跟踪系统&#xff0c;用于管理软件开发中的问题和缺陷。在 Windows 环境下配置 Mantis 可以帮助开发者更方便地进行项目管理。以下是一个详细的教程&#xff0c;包含了 EasyPHP Devserver 和…

python中字符串操作函数split的用法

在Python中&#xff0c;字符串操作最常用的split()函数&#xff0c;用于将字符串分割成子字符串&#xff0c;并返回一个包含这些子字符串的列表。split()函数通过指定分隔符将字符串拆分成多个部分。 split()函数的语法&#xff1a; str.split(separator, maxsplit)separator…

路径规划之A*算法

系列文章目录 路径规划之Dijkstra算法 路径规划之Best-First Search算法 路径规划之A*算法 路径规划之A*算法 系列文章目录前言一、前期准备1.1 算法对比1.2 数学式方法1.3 启发式方法 二、A*算法2.1 起源2.2 思想2.3 启发式函数2.4 过程2.5 案例查看 前言 之前提过Dijkstra算…

leetcode 1670

leetcode 1670 解题思路 使用2个deque作为类的成员变量 code class FrontMiddleBackQueue { public:deque<int> left;deque<int> right;FrontMiddleBackQueue() {}void pushFront(int val) {left.push_front(val);if(left.size() right.size()2){right.push_fr…

如何使用ArcGIS Pro制作一张北极俯视地图

地图的表现形式有很多种&#xff0c;经常我们看到的地图是以大西洋为中心的地图&#xff0c;还有以太平洋为中心的地图&#xff0c;今天要给大家介绍的地图是从北极上方俯视看的地图&#xff0c;这里给大家讲解一下制作方法&#xff0c;希望能对你有所帮助。 修改坐标系 制作…

带着GPT-4V(ision)上路,自动驾驶新探索

On the Road with GPT-4V(ision): Early Explorations of Visual-Language Model on Autonomous Driving GitHub | https://github.com/PJLab-ADG/GPT4V-AD-Exploration arXiv | https://arxiv.org/abs/2311.05332 自动驾驶技术的追求取决于对感知、决策和控制系统的复杂集成。…

Oracle常用系统变量

Oracle常用系统变量 当使用Oracle数据库时&#xff0c;可以通过系统变量来获取有关客户端连接、数据库和DDL操作的信息。以下是这些系统变量的详细介绍和示例代码&#xff1a; Ora_client_ip_address: 返回客户端的IP地址 应用场景&#xff1a;在数据库日志中记录客户端连接的…

vue项目中使用jsonp跨域请求百度联想接口

一. 内容简介 vue项目中使用jsonp跨域请求百度联想接口 二. 软件环境 2.1 Visual Studio Code 1.75.0 2.2 chrome浏览器 2.3 node v18.14.0 三.主要流程 3.1 代码 核心代码 // 这个是请求函数doLeno() {// 挂载回调函数&#xff0c;不挂载&#xff0c;会报不存在window…