前端解析excel表格实现

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用第三方库的话就会简单点,以上就是前端解析方式啦