React Native实现Excel文件转JSON时FileReader报错如何解决

你遇到的FileReader.readAsArrayBuffer is not implemented报错是因为React Native运行环境没有实现Web标准里的FileReader全量API，原来的Web端Excel解析逻辑不能直接复用，调整方案如下：

首先确保你已经安装了以下依赖，缺失的请自行安装：

• xlsx：Excel解析核心库
• react-native-document-picker：你已接入的文件选择组件
• react-native-fs：React Native本地文件读取工具

1. 导入依赖 #

// 顶部导入需要的模块
import XLSX from 'xlsx';
import DocumentPicker from 'react-native-document-picker';
import RNFS from 'react-native-fs';

2. 重写Excel解析方法 #

const readExcel = async (fileUri) => {
  try {
    // 以base64格式读取选中的Excel文件
    const base64Content = await RNFS.readFile(fileUri, 'base64');
    // 传入xlsx解析
    const workbook = XLSX.read(base64Content, { type: 'base64' });
    // 取第一个工作表数据
    const firstSheetName = workbook.SheetNames[0];
    const firstSheet = workbook.Sheets[firstSheetName];
    // 转为JSON格式
    const jsonData = XLSX.utils.sheet_to_json(firstSheet);
    // 赋值到状态
    setItems(jsonData);
  } catch (err) {
    console.error('Excel转JSON失败:', err);
  }
};

3. 调整文件选择逻辑 #

注意DocumentPicker.pickSingle是异步方法，你之前没有加await导致无法正确获取文件uri：

<TouchableOpacity 
  onPress={async () => {
    try {
      // 等待用户选择文件
      const pickResult = await DocumentPicker.pickSingle({
        type: [DocumentPicker.types.xlsx],
      });
      // 调用解析方法
      await readExcel(pickResult.uri);
    } catch (err) {
      // 处理取消选择的情况
      if (DocumentPicker.isCancel(err)) return;
      console.error('文件选择出错:', err);
    }
  }}
  style={{position: 'absolute',bottom:16,right:16 }}
>
  <Text style={{fontFamily: "Montserrat-SemiBold",fontSize: 18,color:'#00c2cb'}}>Bulk Upload</Text>
</TouchableOpacity>

• 安卓端需要在AndroidManifest.xml中添加存储读取权限，否则无法访问选中的文件
• 安装完新依赖后需要重新打包运行项目，不要使用热更新加载
• 如果需要自定义转换后的JSON格式，可以给XLSX.utils.sheet_to_json传配置参数，比如添加{header: ['字段1','字段2']}可以自定义表头字段，或者添加{raw: false}把单元格格式转为文本格式

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