vue3中获取Excel和csv文件中的内容

1.效果

2.安装

npm install xlsxyarn add xlsx

3.引入使用

<el-upload ref="uploadRef" :on-change="changeFile" :show-file-list="false" class="mr10" accept=".csv, .xlsx, .xls"action="#" :auto-upload="false"><template #trigger><el-button type="primary">选择文件</el-button></template>
</el-upload>
import * as XLSX from "xlsx"// csv/excel 选择文件
const changeFile = async (file) => {// const file = file.file;// 创建文件读取对象 用于读取file 和 blobconst fileReader = new FileReader();let sheetObj = []// 读取文件到二进制 异步读取 配合 readAsBinaryString(file) 函数一起使用fileReader.readAsBinaryString(file.raw);fileReader.onload = (event) => {console.log(event);// 得到二进制的resultconst { result } = event.target;console.log(result);// 通过$xlsxUtils 解析二进制流获得workbook对象const wb = XLSX.read(result, { type: "binary" });console.log(wb);// 遍历sheetfor (let sheetName in wb.Sheets) {// 虽然wb.Sheets中可以看出sheet都是一个对象 但是此处遍历只会得到sheetNameconsole.log(sheetName);// 通过sheetName获取真正的sheet对象console.log(wb.Sheets[sheetName]);// 通过xlsxUtils.sheet_to_json() 转换成对象sheetObj = XLSX.utils.sheet_to_json(wb.Sheets[sheetName]);console.log('sheetObj', sheetObj);// 下面就是对象操作 根据实际情况自定}sheetObj.forEach((el, i) => {dataList.value.push({answer: el.answer,question: el.question,})})}// 以二进制方式打开文件// fileReader.readAsBinaryString(file);// 阻止上传console.log(file, 'file');return false
}

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

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

相关文章

滚动表格(vue版本)【已验证可正常运行】

演示图 注&#xff1a;以下代码来自于GPT4o&#xff1a;国内官方直连GPT4o 代码 <template><div><div class"alarmList-child" ref"alarmList" mouseenter.stop"autoRoll(1)" mouseleave.stop"autoRoll()"><div…

基于DPU的Ceph存储解决方案

1. 方案背景和挑战 Ceph是一个高度可扩展、高性能的开源分布式存储系统&#xff0c;设计用于提供优秀的对象存储、块存储和文件存储服务。它的几个核心特点是&#xff1a; 弹性扩展&#xff1a;Ceph能够无缝地水平扩展存储容量和性能&#xff0c;只需添加新的存储节点即可&am…

【AUTOSAR 基础软件】DEM模块详解(诊断故障管理)

文章包含了AUTOSAR基础软件&#xff08;BSW&#xff09;中DEM模块相关的内容详解。本文从ISO标准&#xff0c;AUTOSAR规范解析&#xff0c;ISOLAR-AB配置以及模块相关代码分析四个维度来帮读者清晰的认识和了解DEM这一基础软件模块。文中涉及的ISOLAR-AB配置以及模块相关代码都…

查询DBA_TEMP_FILES报错,删除临时表空间报错ORA-60100

SYMPTOMS 查询DBA_TEMP_FILES报错如下图 ORA-01157: cannotidentify/ock data fle 201 -see DBWR trace fle ORA-01110: data fle 20 1: D:APPADMINISTRATORIORADATA MARTIDATAFILE 01157,00000-"cannotidentify/ock data fle %s -see DBWR trace fle"*Cause: The b…

2024年湖北省安全员-C证证考试题库及湖北省安全员-C证试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年湖北省安全员-C证证考试题库及湖北省安全员-C证试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#xff09;特种设备作业人员上岗证考试…

云计算:重塑数字时代的基石

目录 一、引言 二、云计算的定义与特点 三、云计算的发展历程 四、云计算的应用场景 五、云计算面临的挑战 六、云计算的未来发展趋势 七、结语 一、引言 随着信息技术的飞速发展&#xff0c;云计算已经逐渐渗透到我们生活的方方面面。从个人用户的在线存储、在线办公&…

应用案例 | 如何监测高价值货物在物流运输过程中受到的振动和冲击?全面保障货物安全

一、货物运输 不同种类的货物对运输的要求不同&#xff0c;钢铁、煤炭、矿石等大宗物资通常对运输要求较低&#xff0c;而电子产品、IT 产品、家电等高价值敏感类货物则更强调运输的安全性和时效性&#xff0c;往往希望能尽可能安全和快速送达这类货物&#xff0c;使之尽快进入…

laravel对接百度智能云 实现智能机器人

创建API Key和 Secret Key进入网址&#xff1a;百度智能云千帆大模型平台 如下图操作&#xff1a; 填写完毕点击确认后&#xff0c;即可得到sk和ak 后端接口实现代码&#xff1a; //调用百度智能云第三方机器人接口public function run($text) {$curl curl_init();curl_setop…

阿一网络安全培训中心专门为你准备了一份WScan使用教程

下载地址&#xff1a;https://github.com/chushuai/wscan/releases 版本的选择 Windows就选windows_amd64 Linux就选linux_amd64 mac就选darwin_amd64 下载好后&#xff0c;运行一次exe会生成一个config.yaml文件 把该文件中plugins下面的所有插件的enabled设置为True。&…

数据库使用笔记

1.mysql数据库频繁访问导致连接超时 解决办法一&#xff1a; 优化查询&#xff1a;检查并优化SQL查询语句&#xff0c;减少不必要的数据库调用。增加连接池大小&#xff1a;如果应用程序使用连接池&#xff0c;可以考虑增加连接池的最大连接数。&#xff08;注&#xff1a;不能…

Nginx网站服务详解(设置并发数、实现不同虚拟主机等)

一、nginx的最大并发数设置已经状态收集模块 [root192 nginx]# cat nginx.conf # For more information on configuration, see: # * Official English Documentation: http://nginx.org/en/docs/ # * Official Russian Documentation: http://nginx.org/ru/docs/user ngin…

单源最短路径问题(Dijstra)

#include<iostream> using namespace std; #define MAX 500 #define INT 999 typedef struct {char vex[MAX];int Edge[MAX][MAX];int vexnum,arcnum; }MGraph; void InitMG(MGraph &MG) {cout<<"输入顶点数和边数&#xff1a;";cin>>MG.vexnu…

SOBEL图像边缘检测器的设计

本项目使用FPGA设计出SOBEL图像边缘检测器&#xff0c;通过分析项目在使用过程中的工作原理和相关软硬件设计进行分析详细介绍SOBEL图像边缘检测器的设计。 资料获取可联系wechat 号&#xff1a;comprehensivable 边缘可定义为图像中灰度发生急剧变化的区域边界,它是图像最基本…

linux中find命令和exec的强大组合用法

如何将 find 命令与 exec 一起使用 Find 是一个已经非常强大的命令&#xff0c;用于根据许多条件搜索文件。exec 命令使您能够处理 find 命令的结果。 我在这里分享的例子只是一瞥。find-exec 命令组合在一起为您提供了在 Linux 命令行中执行操作的无限可能。 find 和 exec 命令…

Llama 3 模型微调的步骤

环境准备 操作系统&#xff1a;Ubuntu 22.04.5 LTS Anaconda3&#xff1a;Miniconda3-latest-Linux-x86_64 GPU&#xff1a; NVIDIA GeForce RTX 4090 24GStep 1. 准备conda环境 创建一个新的conda环境&#xff1a; conda create --name llama_factory python3.11激活刚刚创…

[每周一更]-(第103期):GIT初始化子模块

文章目录 初始化和更新所有子模块分步骤操作1. 克隆包含子模块的仓库2. 初始化子模块3. 更新子模块 查看子模块状态提交子模块的更改处理子模块路径错误的问题 该问题的缘由是因为&#xff1a;在写某些代码的时候&#xff0c;仓库中有些文件夹&#xff0c;只提交了文件夹名称到…

使用 Ubuntu x86_64 平台交叉编译适用于 Linux aarch64(arm64) 平台的 QT5(包含OpenGL/WebEngine支持) 库

使用 Ubuntu AMD64 平台交叉编译适用于 Linux ARM64 平台的 QT5(包含 OpenGL/WebEngine 支持) 库 目录 使用 Ubuntu AMD64 平台交叉编译适用于 Linux ARM64 平台的 QT5(包含 OpenGL/WebEngine 支持) 库写在前面前期准备编译全流程1. 环境搭建2. 复制源码包并解压&#xff0c;创…

在Mac上恢复丢失或未保存的Word文档的5种有效方法

“救命&#xff01;我想在Mac上恢复丢失的Word文档。就在 1 小时前&#xff0c;我错误地删除了它们&#xff0c;并清空了垃圾桶。这些Word文档对我来说非常重要。我不知道如何恢复它们&#xff0c;谁能帮我&#xff1f;提前致谢&#xff01; 没有什么比忘记保存 Word 文档或在…

3d模型里地毯的材质怎么赋予?---模大狮模型网

在进行3D建模时&#xff0c;赋予地毯逼真的材质是营造现实感和增强场景氛围的重要步骤。模大狮将介绍在常见的3D建模软件中&#xff0c;如何有效地为地毯赋予各种材质&#xff0c;以及一些实用的技巧和注意事项。 一、选择合适的地毯材质 在3D建模中&#xff0c;地毯的材质选择…

双向长短期记忆神经网络BiLSTM

先说一下LSTM LSTM 是一种特殊的 RNN&#xff0c;它通过引入门控机制来解决传统 RNN 的长期依赖问题。 LSTM 的结构包含以下几个关键组件&#xff1a; 输入门&#xff08;input gate&#xff09;&#xff1a;决定当前时间步的输入信息对细胞状态的影响程度。遗忘门&#xff…