前端将xlsx转成json

  1. 第一种方式,用js方式
    1.1先安装插件
    万事都离不开插件的支持首先要安装两个插件

1.2. 安装xlsx

javascript 复制代码
cnpm install xlsx --save

注:这块我用的cnpm,原生的是npm,因为镜像的问题安装了cnpm,至于怎么装网上一搜一大堆

1.3安装js doc插件

安装js doc插件。在vscode的插件管理,搜索Add jsdoc comments,然后安装就可以

注:这个插件是给vscode写js代码时提示用的,新手建议装一下,老鸟的话你随便

1.4.写上传文件的按钮

我这块儿没用element plus,后边第二种方式会用

样式这块用的js

javascript 复制代码
  <div>
    <span>
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <input type="file" @change="handleChange">
    </span>
  </div>

1.5.逻辑代码,每一行都有注释

javascript 复制代码
import * as XLSX from "xlsx"

const handleChange = (e) => {
  // 得到上传文件的信息
  let fileObj = e.target.files[0]
  // console.log(fileObj)
  // FileReader 对象是专门操作二进制数据的,主要用于将文件内容读入内存当中
  const fileReader = new FileReader()
  // 将文件内容读成二进制数据放到内存当中
  fileReader.readAsArrayBuffer(fileObj)
  // 读取文件的内容
  fileReader.onload = (event) =>{
    // 读进来之后是一个二进制文件
    const fileData = event.target.result;
    // 用XLSX以二进制的方式取出电子表格字节中的数据
    const workbook = XLSX.read(fileData,{
      type:"binary",
    })
    // 按选项卡顺序列出工作表名称,也就是工作簿的名称,
    const wsname = workbook.SheetNames[0];
    // console.log(wsname)
    // 从工作表创建JS值数组并解析成json数据
    const sheetJson = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
    console.log(sheetJson)
  }
}

1.6.别看广告看疗效,上图

2.第二种方式就是哪种第二种方式

相关推荐
咖啡无伴侣33 分钟前
unplugin-auto-import 使用详解+面试高频考点
前端·架构
搬砖记录员38 分钟前
录屏文件打不开?H.265兼容性踩坑与4种实战方案
前端
明月_清风44 分钟前
SEO 完全指南:从底层原理到实战应用场景
前端·seo
默_笙1 小时前
🚲 手写一个"Claude Code":我用 LangChain + ReAct 循环,让 AI 自己读文件、解释代码
前端·javascript
星河耀银海1 小时前
框架结合:Vue+HTML5+AI实现智能前端应用开发
前端·vue.js·html5
等咸鱼的狸猫2 小时前
# JS 核心六大主题:闭包内存模型、原型链查找、事件流机制与 Promise / Event Loop 实现视角复盘
前端·javascript
袋鱼不重2 小时前
乐观锁与悲观锁:原理、选型与前后端实践
前端·后端
Charonmomo2 小时前
react/antd - 不能正确打开标签页问题记录
前端·react.js·前端框架
冬枳3 小时前
基于OpenSeagragon封装的前端病理切片展示组件
前端·typescript
前网易架构师-高司机3 小时前
带标注的SDD-SAR遥感船舶识别数据集,识别率92.9%,7000张图,支持yolo,coco json,voc xml,文末有模型训练代码
yolo·json·数据集·遥感·sar·船舶·sdd