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

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

在这里插入图片描述

相关文章:

  • 手机App防沉迷系统C卷(JavaPythonC++Node.jsC语言)
  • UE5.1_TimeLine
  • yudao-cloud 学习笔记
  • web服务,C/S框架,单设备登陆实现方案
  • C++中实现String类
  • mysqld.exe运行时,提示缺少msvcr100.dll,msvcp100.dll文件,导致mysql安装失败或mysql服务无法启动
  • vue若依自定义权限控制
  • java面试题:为什么 SQL 语句不要过多的 join?
  • 【华为OD机试】智能成绩表【C卷|100分】
  • Liinux——(网络)socket编程
  • Vue3全家桶 - VueRouter - 【3】嵌套路由【children】
  • win10系统在低分辨率显示器显示模糊时
  • 点亮创造力:探索AI大模型开发的无限可能性!
  • python淘宝网页爬虫数据保存到 csv和mysql(selenium)
  • Visual Studio 2022 Version 17.9 新功能
  • [译]CSS 居中(Center)方法大合集
  • 【mysql】环境安装、服务启动、密码设置
  • 77. Combinations
  • Android组件 - 收藏集 - 掘金
  • - C#编程大幅提高OUTLOOK的邮件搜索能力!
  • es6要点
  • LintCode 31. partitionArray 数组划分
  • SegmentFault 技术周刊 Vol.27 - Git 学习宝典:程序员走江湖必备
  • SpringCloud集成分布式事务LCN (一)
  • Storybook 5.0正式发布:有史以来变化最大的版本\n
  • win10下安装mysql5.7
  • 闭包--闭包之tab栏切换(四)
  • 给Prometheus造假数据的方法
  • 面试题:给你个id,去拿到name,多叉树遍历
  • 设计模式走一遍---观察者模式
  • 正则与JS中的正则
  • “十年磨一剑”--有赞的HBase平台实践和应用之路 ...
  • 【云吞铺子】性能抖动剖析(二)
  • ​io --- 处理流的核心工具​
  • ​什么是bug?bug的源头在哪里?
  • #HarmonyOS:软件安装window和mac预览Hello World
  • #stm32整理(一)flash读写
  • %3cli%3e连接html页面,html+canvas实现屏幕截取
  • (+3)1.3敏捷宣言与敏捷过程的特点
  • (145)光线追踪距离场柔和阴影
  • (2021|NIPS,扩散,无条件分数估计,条件分数估计)无分类器引导扩散
  • (arch)linux 转换文件编码格式
  • (DFS + 剪枝)【洛谷P1731】 [NOI1999] 生日蛋糕
  • (JS基础)String 类型
  • (MonoGame从入门到放弃-1) MonoGame环境搭建
  • (超详细)2-YOLOV5改进-添加SimAM注意力机制
  • (附源码)ssm高校实验室 毕业设计 800008
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理 第13章 项目资源管理(七)
  • .NET CORE 3.1 集成JWT鉴权和授权2
  • .NET CORE Aws S3 使用
  • .NET Core中Emit的使用
  • .NET I/O 学习笔记:对文件和目录进行解压缩操作
  • .NET 实现 NTFS 文件系统的硬链接 mklink /J(Junction)
  • .net6解除文件上传限制。Multipart body length limit 16384 exceeded
  • .Net6使用WebSocket与前端进行通信