posts - 23,comments - 2,views - 25824

1. 背景:在做react项目时,遇到一个解析excel的需求变更,把从原来后端解析变更为前端解析。

1.1 由于后端解析excel文件有安全隐患,因为项目中后端不允许上传文件,当然后端解析对前端来说是最简单的方式,只需要调用个api。接下来讲讲前端解析方式吧:

2.1 安装依赖

npm install xlsx

2.2 引用xlsx

import * as XLSX from 'xlsx'

2.3 前端解析代码

点击查看代码
const handleUploadFile = (files) => {
files.forEach((file)=>{
const reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = () => {
const binaryStr = reader.result;
const workbook = XLSX.read(binaryStr, { type: 'binary' })
const worksheet = workbook.Sheets[workbook.SheetNames[0]];
const fileData = XLSX.utils.sheet_to_json(worksheet);
/*
然后根据自己项目的导出的excel数据需求对fileData进行处理,
将处理好的数据用state接收,然后就可以渲染啦,要是还需要对文件类型做判断,
那对files做处理就行
*/
}
})
}

前端解析excel用第三方库的话就会简单点,以上就是前端解析方式啦

posted on   九零菜菜  阅读(427)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示