xlsx.js读取本地文件,按行转成数组数据

1.下包

//1.
npm install xlsx 
//2.
yarn add xlsx

2.结构

<template>
  <input type="file" @change="onFileChange" />
</template>

3.代码

<script>
import * as XLSX from 'xlsx'

export default {
  methods: {
    onFileChange (event) {
      //通过 event.target.files 获取到选择的文件
      const file = event.target.files[0]
      //创建一个 FileReader 实例用于读取文件内容
      const reader = new FileReader()

      reader.onload = (e) => {
        const data = e.target.result
		//文件类型校验
		const fileType = file.name.split('.').pop().toLowerCase();
	    if (fileType !== 'xls' && fileType !== 'xlsx' && fileType !== 'excel') {
	      alert('请选择有效的xls、xlsx或Excel文件');
	      return;
	    }

        // 使用 XLSX.read() 方法解析文件数据
        //XLSX.read() 方法接受两个参数:文件数据和解析选项。
        //这里我们将 type 设置为 'binary',以二进制字符串的形式读取文件
        const workbook = XLSX.read(data, { type: 'binary' })

		//遍历工作表的名称(workbook.SheetNames)并获取每个工作表的数据。
		//通过 workbook.Sheets[sheetName],获取到具体工作表的数据
        workbook.SheetNames.forEach(sheetName => {
          const worksheet = workbook.Sheets[sheetName]
          //将工作表的数据转换为数组形式
          //通过设定 header 为 1,我们将首行作为数组的键名
          const rows = XLSX.utils.sheet_to_json(worksheet, { header: 1 })

          console.log(`Sheet Name: ${sheetName}`)
		  //通过循环遍历每一行数据),将每一行的数据打印出来
          rows.forEach(row => {
            console.log(row, '每一行')
          })
        })
      }
	  //读取文件内容,并以二进制字符串的形式传递给 reader.onload 的回调函数进行处理
      reader.readAsBinaryString(file)
    }
  }
}
</script>

4.结果

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【“双碳”目标】Acrel-2000Z分布式光伏发电监测系统解决方案

1 概述 “十四五”期间&#xff0c;随着“双碳”目标提出及逐步落实&#xff0c;本就呈现出较好发展势头的分布式光伏发展有望大幅提速。就“十四五”光伏发展规划&#xff0c;国家发改委能源研究所可再生能源发展中心副主任陶冶表示&#xff0c;“双碳”目标意味着国家产业结…

【JS逆向学习】猿人学 第五题 js混淆 乱码

逆向目标 网址&#xff1a;https://match.yuanrenxue.cn/match/5接口&#xff1a;https://match.yuanrenxue.cn/api/match/5?page2&m1709806560791&f1709806560000参数&#xff1a; Cookie(m、RM4hZBv0dDon443M)payload(m、f) 逆向过程 老规矩&#xff0c;上来先分…

Java后端八股文之Redis

文章目录 1. Redis是什么&#xff1f;2. Redis为什么这么快&#xff1f;3. 为什么要使用缓存&#xff1f;4. Redis几种使用场景&#xff1a;5. Redis的Zset底层为什么要使用跳表而不是平衡树、红黑树或者B树&#xff1f;6.Redis持久化6.1 什么是RDB持久化6.1.1RDB创建快照会阻塞…

修改Android打包apk的名字和目录

app打包生成apk后通常需要进行备份&#xff0c;但是要区分好哪个apk是什么版本的、什么时候打包的&#xff0c;以方便以后区分使用。 最开始的想法是把版本号、创建时间这些加在apk文件名上即可&#xff0c;但是公司要求apk使用一个固定的名称&#xff0c;那我怎么保存版本号信…

OpenGL学习——19.模板测试

前情提要&#xff1a;本文代码源自Github上的学习文档“LearnOpenGL”&#xff0c;我仅在源码的基础上加上中文注释。本文章不以该学习文档做任何商业盈利活动&#xff0c;一切著作权归原作者所有&#xff0c;本文仅供学习交流&#xff0c;如有侵权&#xff0c;请联系我删除。L…

Vue+OpenLayers7入门到实战:OpenLayers鼠标移动事件使用,实现鼠标移动到点位上方后高亮显示点位要素

返回《Vue+OpenLayers7》专栏目录:Vue+OpenLayers7入门到实战 前言 本章介绍如何使用OpenLayers7在地图上监听鼠标移动事件,并简单实现鼠标移动到点位上方后高亮显示点位要素的功能,带领大家快速上手OpenLayers鼠标移动事件的应用。 二、依赖和使用 "ol": &quo…

趣味看图-Linux 文件系统的组成

/&#xff08;根目录&#xff09;&#xff1a;根目录是Linux文件系统中的顶级目录。所有其他目录都是根目录的子目录&#xff0c;使其成为整个文件系统的父目录。 /bin&#xff1a;包含启动系统和执行基本操作所需的基本二进制可执行文件。这些对所有用户都可用。 /boot&…

利用yaml文件部署NacosXxl-job到阿里云的ACK

背景介绍 随着容器化的技术成熟落地&#xff0c;拥抱各种成熟的容器化集群平台是加速我们落地的必然之路&#xff0c;目前国内以阿里云、华为云、腾讯云为平台的供应商为主&#xff0c;国外则以AWS&#xff0c;Azure为主&#xff0c;让我们借助平台已有的优势进行快速落地提高…

G-LAB郭主任公开课:Docker容器,3月18日开课!

带你一起走进Linux的世界&#xff01; 【G-LAB】 Linux最新技术—Docker容器 免费公开课即将开讲&#xff01; 不容错过&#xff01; 公开课课程为期两天&#xff0c;3月18日&#xff06;3月19日晚20&#xff1a;00 分享主题&#xff1a; —3月18日 Docker概念、安装、架…

MySQL-QA-异常问题及解决方案(持续更新)

MySQL-Q&A(持续更新) 1.1 PID文件找不到 问题描述 错误详情&#xff1a; ERROR&#xff01;The server quit without updating PID file (/usr/local/mysql/data/localhost.localdomain.pid) 解决方案 首先排查配置文件&#xff0c;一般路径为&#xff1a;/etc/my.cnf 检查…

centos安装hadoop启动问题解决方案

1、出现了问题localhost: ERROR: JAVA_HOME is not set and could not be found. *解决方案尝试&#xff1a; 修改hadoop-env.sh&#xff08;在etc/hadoop&#xff09; sudo gedit /usr/local/hadoop/etc/hadoop/hadoop-env.sh 将原本的JAVA_HOME 替换为绝对路径就可以了 #expo…

RK3588-hdmiin

1. HDMI-IN简介 HDMI IN功能可以通过桥接芯⽚的⽅式实现&#xff0c;将HDMI信号转换成MIPI信号接收RK3588芯⽚平台⾃带HDMI RX模块&#xff0c;可以直接接收HDMI信号&#xff0c;无需通过桥接芯⽚实现。在ArmSoM系列产品中&#xff0c;ArmSoM-W3支持HDMI-IN功能HDMI-IN功能框图…

3.10复试专业课日报【周末总结】

数据结构 考点一&#xff0c;考点二 操作系统 计算机网络 组成原理 1.什么是中断向量 2. 数据库 选择题80-100 1.数据库的逻辑模型&#xff08;数据模型&#xff09; 2.DCL,DML,DQL,DDL 3.数据库特点 算法 1.复习 对称二叉树&#xff0c;二叉树最大深度 2.只出现一…

Mybatis-plus学习之Lombok

何为Lombok Lombok 是一个 Java 库&#xff0c;旨在通过自动生成样板代码来简化 Java 类的编写。它通过使用注解来减少冗长和重复的代码&#xff0c;提高代码的可读性和开发效率。 优点与优势 使用 Lombok&#xff0c;你可以在 Java 类中添加各种注解&#xff0c;从而自动为…

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《含海上风电制氢的综合能源系统分布鲁棒低碳优化运行》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

Navicat连接数据库出现的问题(3.8)

Navicat使用教程——连接/新建数据库、SQL实现表的创建/数据插入、解决报错【2059-authentication plugin‘caching_sha2_password’……】_2059authentication plugin-CSDN博客

NTC 测试温度

NTC 测温应用电路汇总及温度读取软件设计 - 知乎 1.开尔文273.5就是0摄氏度 2.B一般厂家都会给 3.上面公式大概准 4.计算还是查表法&#xff0c;段与段之间近似直线

Net8 ABP VNext集成FreeSql、SqlSugar

ABP可以快速搭建开发架构&#xff0c;但是内置的是EFCore&#xff0c;国内中小企业使用FreeSql与SqlSugar还是较多&#xff0c;为新手提供使用提供参考 ABP、FreeSql、SqlSugar参考地址&#xff1a; ABP Framework | Open source web application framework for ASP.NET Core…

在win7中快速安装vue2

首先要求我们安装node.js 如果没有安装可以点击跳转 安装node 1.配置环境变量 其实安装完node&#xff0c;就自动在path里增加环境变量&#xff0c;但是为了以后的本地部署项目&#xff0c;我们需要找到node.js的安装根目录 1.1在当中新建"node_cache"缓存和&qu…