Ionic React使用react-papaparse导出CSV浏览器正常移动端失效如何解决

Ionic打包成原生APP后运行在WebView环境中，react-papaparse默认的CSVDownloader组件是基于浏览器a标签+Blob URL的前端下载逻辑实现，该逻辑在WebView中无法直接调用原生文件系统写入权限，因此会出现浏览器正常、移动端失效的问题。

• 第一步：安装Capacitor官方原生依赖

npm install @capacitor/filesystem @capacitor/preferences
npx cap sync android

• 第二步：配置安卓存储权限
  打开安卓项目路径下的android/app/src/main/AndroidManifest.xml，在manifest节点下添加权限配置：

<!-- 安卓10及以下存储权限 -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="29" />
<!-- 安卓13及以上文件访问权限 -->
<uses-permission android:name="android.permission.READ_MEDIA_FILES" />

• 第三步：重写导出逻辑，替换原有CSVDownloader组件
  不再使用react-papaparse提供的下载组件，自行完成CSV转换后写入本地公共下载目录，完整代码如下：

import { Filesystem, Directory } from '@capacitor/filesystem';
import { Preferences } from '@capacitor/preferences';
import { jsonToCSV } from 'react-papaparse';
import { IonButton, toastController } from '@ionic/react';
import React from 'react';

class ExportCSV extends React.Component {
  // 生成导出文件名
  getFileName = () => {
    const today = new Date();
    const dd = String(today.getDate()).padStart(2, '0');
    const mm = String(today.getMonth() + 1).padStart(2, '0');
    const yyyy = today.getFullYear();
    return `damage_${dd}-${mm}-${yyyy}.csv`;
  }

  // 导出CSV核心逻辑
  handleExport = async () => {
    try {
      // 1. 读取本地存储数据
      const { value } = await Preferences.get({ key: 'csv' });
      const sourceData = value ? JSON.parse(value) : [];

      // 测试用模拟数据，正式环境可以注释
      // const sourceData = [
      //   {
      //     Name: "Steve Rogers",
      //     Hero: "Captain America",
      //     Color: "Blue & Red",
      //     Weapon: "Grit & Discipline"
      //   },
      //   {
      //     Name: "Tony Stark",
      //     Hero: "Ironman",
      //     Color: "Red & Gold",
      //     Weapon: "Money & Mind"
      //   }
      // ];

      if(sourceData.length === 0) {
        const toast = await toastController.create({
          message: '没有可导出的数据',
          duration: 2000
        });
        await toast.present();
        return;
      }

      // 2. 转换为CSV格式
      const csvContent = jsonToCSV(sourceData);

      // 3. 写入到手机公共下载目录
      const fileName = this.getFileName();
      await Filesystem.writeFile({
        path: fileName,
        data: csvContent,
        directory: Directory.Downloads,
        encoding: 'utf8'
      });

      // 导出成功提示
      const toast = await toastController.create({
        message: `CSV文件已保存到下载目录：${fileName}`,
        duration: 3000
      });
      await toast.present();
    } catch (e) {
      console.error('导出失败：', e);
      const toast = await toastController.create({
        message: '导出失败，请检查存储权限是否开启',
        duration: 3000
      });
      await toast.present();
    }
  }

  render() {
    return (
      <IonButton onClick={this.handleExport}>
        导出CSV
      </IonButton>
    );
  }
}

export default ExportCSV

打包安装到安卓设备后，点击导出按钮，生成的CSV文件会直接保存到系统公共下载目录，在系统文件管理器的Download文件夹即可查看。

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