React Native Web中使用react-native-fs+xlsx导出Excel报错求助

错误原因 #

react-native-fs是仅针对React Native原生平台（iOS/Android）开发的文件系统模块，它依赖原生端API实现文件读写操作。在Chrome、Edge等浏览器环境（即React Native Web场景）中，不存在对应的原生支持，RNFS模块无法完成初始化，导致访问RNFSFileTypeRegular这类内部属性时触发undefined错误。

解决方案 #

针对Web环境，无需依赖RNFS，直接利用浏览器原生的Blob和下载API实现Excel文件导出即可。如果项目需要同时兼容原生和Web平台，可通过平台判断分别处理逻辑。

1. 仅Web环境的修正代码 #

import React from "react";
import xlsx from 'xlsx';

export const exportDataToExcel = (fileName, data, headerTitle) => {
    // 创建工作簿和工作表
    let wb = xlsx.utils.book_new();
    let ws = xlsx.utils.json_to_sheet(data, { header: [headerTitle] });
    xlsx.utils.book_append_sheet(wb, ws, fileName);
    
    // 生成Excel二进制数据（修正原代码的xslx拼写错误）
    const wbout = xlsx.write(wb, { type: 'binary', bookType: "xlsx" });

    // 将二进制字符串转换为ArrayBuffer
    function s2ab(s) {
        const buf = new ArrayBuffer(s.length);
        const view = new Uint8Array(buf);
        for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }

    // 创建Blob并触发浏览器下载
    const blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${fileName}.xlsx`; // 修正原代码未定义的formName变量
    document.body.appendChild(a);
    a.click();
    
    // 清理临时资源
    setTimeout(() => {
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    }, 100);
};

2. 兼容原生+Web平台的代码 #

如果项目同时运行在原生和Web环境，可通过Platform模块区分处理：

import React from "react";
import { Platform } from "react-native";
import xlsx from 'xlsx';

// 仅在原生平台加载RNFS
let RNFS;
if (Platform.OS !== 'web') {
    RNFS = require('react-native-fs');
}

export const exportDataToExcel = (fileName, data, headerTitle) => {
    let wb = xlsx.utils.book_new();
    let ws = xlsx.utils.json_to_sheet(data, { header: [headerTitle] });
    xlsx.utils.book_append_sheet(wb, ws, fileName);
    const wbout = xlsx.write(wb, { type: 'binary', bookType: "xlsx" });

    if (Platform.OS !== 'web') {
        // 原生平台使用RNFS写入文件
        RNFS.writeFile(RNFS.ExternalStorageDirectoryPath + `/${fileName}.xlsx`, wbout, 'ascii')
            .then(() => console.log(`Excel文件创建成功`))
            .catch(e => console.error(`Excel文件创建失败`, e));
    } else {
        // Web平台触发浏览器下载
        function s2ab(s) {
            const buf = new ArrayBuffer(s.length);
            const view = new Uint8Array(buf);
            for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
            return buf;
        }
        const blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `${fileName}.xlsx`;
        document.body.appendChild(a);
        a.click();
        
        setTimeout(() => {
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }, 100);
    }
};

原代码的其他问题修正 #

• 拼写错误：xslx.write应改为xlsx.write
• 未定义变量：formName替换为传入的fileName参数，避免变量未定义报错

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