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用第三方库的话就会简单点,以上就是前端解析方式啦
分类:
react
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库