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.结果

在这里插入图片描述

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

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

相关文章

selenium高级应用

常见控件应用 复杂的控件操作1.操作Ajax选项2.滑动滑块操作 WebDriver的特殊操作元素class值包含空格property、attribute、text的区别定位动态id 截图功能页面截图页面截图&#xff0c;返回截图的二进制数据页面截图&#xff0c;返回base64的字符串截取指定元素。先定位元素&a…

计算机网络—以太网接口和链路配置

目录 1.拓扑图 2.以太网交换机基础配置 3.配置手动模式的链路聚合 4.配置静态 LACP 模式的链路聚合 5.配置文件 1.拓扑图 2.以太网交换机基础配置 华为交换机接口默认开启了自协商功能&#xff0c;需要手动配置S1与 S2上G0/0/9和G0/0/10接口的速率。 首先修改交换机的设…

深入理解Vue.js中的nextTick:实现异步更新的奥秘

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

代码随想录算法训练营第五十三天|1143.最长公共子序列 、1035.不相交的线、53. 最大子序和

文章目录 1.最长公共子序列2.不相交的线3.最大子序和 1.最长公共子序列 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长公共子序列的长度。如果不存在公共子序列&#xff0c;返回 0。 一个字符串的子序列是指这样一个新的字符串&#xff1a;它是由原字符串…

两会声音|中国石化人大代表:要突出战略性新兴产业、未来产业的位置

十四届全国人大二次会议即将闭幕&#xff0c;“新质生产力”首次写入政府工作报告&#xff0c;并出现在了重要位置。政府工作报告主要从推动产业链供应链优化升级、积极培育新兴产业和未来产业、深入推进数字经济创新发展等三个方面进行了阐述和规划。 全国两会期间&#xff0c…

C语言 --- 指针(5)

目录 一.sizeof和strlen对比 1.sizeof 2.strlen 3.strlen 和sizeof的对比 二.数组和指针笔试题目详解 回顾&#xff1a;数组名的理解 1.一维数组 2.字符数组 代码1&#xff1a; 代码2&#xff1a; 代码3&#xff1a; 代码4&#xff1a; 代码5&#xff1a; 代码6&am…

计算机网络—eNSP搭建基础 IP网络

目录 1.下载eNSP 2.启动eNSP 3.建立拓扑 4.建立一条物理连接 5.进入终端系统配置界面 6.配置终端系统 7.启动终端系统设备 8.捕获接口报文 9.生成接口流量 10.观察捕获的报文 1.下载eNSP 网上有许多下载eNSP的方式&#xff0c;记得还要下其它三个Virtual Box、Winpa…

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…

mysql下载教程

什么是mysql MySQL是一种开源的关系型数据库管理系统&#xff0c;由瑞典MySQL AB公司开发&#xff0c;现在由Oracle公司维护。MySQL支持多个操作系统&#xff0c;包括Linux、Windows、macOS等。它是一种客户端/服务器模式的数据库&#xff0c;提供高效、可靠、稳定的数据存储和…

如何判断DNS解析故障?

DNS解析负责将域名解析到对应的IP地址&#xff0c;从而实现用户通过域名访问站点的效果。因此DNS解析是整个互联网中非常关键和基础的一个环节&#xff0c;但也是众多网站运营者和管理者经常忽视的一个环节。所以在出现DNS解析错误时&#xff0c;很多人都会感到手足无措&#x…

最新基于R语言lavaan结构方程模型(SEM)技术

原文链接&#xff1a;最新基于R语言lavaan结构方程模型&#xff08;SEM&#xff09;技术https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247596681&idx4&sn08753dd4d3e7bc492d750c0f06bba1b2&chksmfa823b6ecdf5b278ca0b94213391b5a222d1776743609cd3d14…

【供应链】2007-2022上市公司供需波动程度测算(附原始数据+代码)

数据说明&#xff1a;参考孙兰兰&#xff08;2022&#xff09;、巫强&#xff08;2023&#xff09;的方法测算出2007-2022年上市公司供需波动程度。数据来源&#xff1a;企业年报时间跨度&#xff1a;2007-2022年数据范围&#xff1a;A股上市公司数据指标&#xff1a; 证券代码…