React JS中无需上传将本地导入Excel文件转换为JSON格式方法

问题背景 #

现有下拉选择组件将本地assets目录下的Excel文件绑定为选项value，需要在选中选项时，不经过文件上传流程，直接将绑定的静态Excel文件解析为JSON格式，原有未完成代码如下：

import seniorDeveloper from "../../assests/Software Developer Sr..xlsx";
import juniorDeveloper from "../../assests/Software Developer Jr..xlsx";
   
   
const handleexceldropdown=(e)=>{

}
   
<FormControl fullWidth>
  <InputLabel id="demo-simple-select-label">Designation</InputLabel>                                 
  <Select
    labelId="demo-simple-select-label"
    id="demo-simple-select"
    value={Designation}
    label="Designation"
    onChange={handleexceldropdown}
  >
    <MenuItem value={seniorDeveloper }>SeniorDev</MenuItem>                                
    <MenuItem value={juniorDeveloper}>JuniorDev</MenuItem>                             
  </Select>
</FormControl>

具体实现步骤 #

• 安装Excel解析依赖：执行npm install xlsx引入SheetJS解析库，该库可以在浏览器端直接解析Excel格式文件。
• 在组件顶部引入解析库和需要的React hooks：import * as XLSX from 'xlsx'，配合useState存储选中值和解析结果。
• 实现下拉选择回调函数：选中选项时拿到静态文件的访问路径，通过fetch拉取文件二进制内容，再通过xlsx库解析为JSON数据。

完整可运行代码 #

import { useState } from 'react';
import * as XLSX from 'xlsx';
// 注意：原代码路径拼写为assests是错误的，正确目录名是assets，需要修正否则会报404
import seniorDeveloper from "../../assets/Software Developer Sr..xlsx";
import juniorDeveloper from "../../assets/Software Developer Jr..xlsx";
import { FormControl, InputLabel, Select, MenuItem } from '@mui/material';

export default function DesignationSelect() {
  const [designation, setDesignation] = useState('');
  const [excelData, setExcelData] = useState([]);

  const handleexceldropdown = async (e) => {
    const selectedFile = e.target.value;
    setDesignation(selectedFile);

    // 拉取本地静态Excel资源
    const resp = await fetch(selectedFile);
    const blobData = await resp.blob();
    const reader = new FileReader();

    reader.onload = (e) => {
      // 读取二进制数据解析工作簿
      const workbook = XLSX.read(new Uint8Array(e.target.result), { type: 'array' });
      // 取第一个工作表内容转JSON，如需多表可遍历SheetNames处理
      const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
      const jsonRes = XLSX.utils.sheet_to_json(firstSheet, { raw: false });
      
      setExcelData(jsonRes);
      // 后续业务逻辑直接使用jsonRes即可
      console.log('解析完成的JSON数据：', jsonRes);
    };

    reader.readAsArrayBuffer(blobData);
  };

  return (
    <FormControl fullWidth>
      <InputLabel id="demo-simple-select-label">Designation</InputLabel>                                 
      <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        value={designation}
        label="Designation"
        onChange={handleexceldropdown}
      >
        <MenuItem value={seniorDeveloper}>SeniorDev</MenuItem>                                
        <MenuItem value={juniorDeveloper}>JuniorDev</MenuItem>                             
      </Select>
    </FormControl>
  )
}

注意事项 #

1. 原代码中资源路径拼写错误：assests为错误拼写，正确静态资源目录名为assets，必须修正否则会出现文件404错误。
2. 无论是CRA还是Vite构建的项目，import导入的本地静态文件都会返回可直接访问的部署路径，fetch可以正常拉取资源，无需额外服务端支持。
3. 如果Excel存在多个工作表，遍历workbook.SheetNames数组，逐个读取对应sheet内容解析即可。
4. sheet_to_json方法的raw参数设为false时会自动格式化日期、数字等单元格格式，设为true则返回原始单元格值，可根据业务需求调整。

内容的提问来源于stack exchange，提问作者sandeep