使用 Papa Parse 将 JSON 导出为 CSV

Question

我有一个 Ionic React 应用程序，想以 CSV 格式下载数据。因此我添加了react-papaparse，但我无法使用该应用程序下载数据。我在浏览器中试了一下，效果很好。

最后，我希望能够获取存储在手机上的数据，将其从 JSON 转换为 CSV，然后将其下载到手机。我也尝试使用我的获取数据和虚拟数组。都没有用。

但是当我点击浏览器内的按钮时，我可以保存生成的 CSV 文件。因此，我认为我的基本代码正在运行，我只是错过了让它在手机/模拟器（android studio）上运行的部分。

let data
let filename

class ExportCSV extends React.Component {

    getData = async() => {
        let {value} = await Storage.get({key: 'csv' })

        //data = JSON.stringify(value)
        data = value
    }

    getName = () => {
        var today = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
        var yyyy = today.getFullYear();

        today = dd + '-' + mm + '-' + yyyy;

        filename = "damage_" + today //+ ".csv"            
    }  
  
    render() {

        this.getName()            
        
        const exportCSV = async () => {
          await this.getData()
          let csv = jsonToCSV(data)

          return csv
        }

        
        const inputJSON = [
          {
            Name: "Steve Rogers",
            Hero: "Captain America",
            Color: "Blue & Red",
            Weapon: "Grit & Discipline"
          },
          {
            Name: "Tony Stark",
            Hero: "Ironman",
            Color: "Red & Gold",
            Weapon: "Money & Mind"
          },
          {
            Name: "Dr. Banner",
            Hero: "Hulk",
            Color: "Green",
            Weapon: "Mind & Anger"
          },
          {
            Name: "Dr. Strange",
            Hero: "Dr. Strange",
            Color: "Red",
            Weapon: "Magic"
          },
          {
            Name: "Thor",
            Hero: "Thor",
            Color: "Multi",
            Weapon: "Immortality"
          }
        ];

          //<CSVDownloader filename={filename} data={inputJSON} bom={true} download={true}><IonButton>Export CSV</IonButton></CSVDownloader>

      return (
        <CSVDownloader filename={filename} data={() =>exportCSV()} bom={true} download={true}><IonButton>Export CSV</IonButton></CSVDownloader>
      );
    }
  }

export default ExportCSV

Answer 1

通过使用 capacitor filesystem 编写我的 CSV 文件解决了这个问题。在使用capacitor storage API 获取我想要的数据并使用 papa parse 解析它之后，我只是在编写一个新文件。

在写入文件以将其用作 txt 或 csv 时添加 encoding: Encoding.UTF8 很重要。默认情况下，它写入 base64 编码数据。

这是我的解决方案代码：

import React from 'react'
import { jsonToCSV } from 'react-papaparse'
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem'
import { Storage } from '@capacitor/storage'
import { IonButton } from '@ionic/react'

class CsvButton extends React.Component {

    render () {
            
        const saveFile = async() => {

            let {value} = await Storage.get({key: 'csv' })
            let csv = jsonToCSV(value)

            var today = new Date();
            var dd = String(today.getDate()).padStart(2, '0');
            var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
            var yyyy = today.getFullYear();

            today = dd + '-' + mm + '-' + yyyy;

            let filename = "csv_" + today + ".csv"

            await Filesystem.writeFile({
                path: filename,
                data: csv,
                directory: Directory.Documents,
                encoding: Encoding.UTF8
              });
          };
        
    return(
            <IonButton onClick={saveFile}>Export Test</IonButton>
    )
    }
}

export default CsvButton

Answer 2

制作一个测试页面，消除除您要关注的代码之外的所有内容。这样您就可以专注于实现文件下载。

例如：

return (
  <CSVDownloader
    filename={'test.csv'}
    data={'columnOne,columeTwo\nrow1col1,row1col2\nrow2col1,row2col2'}
    bom={true}
    download={true}>
    <IonButton>Export CSV</IonButton>
  </CSVDownloader>
);

我不熟悉 Ionic，但是您确定您的代码在您单击导出按钮时运行吗？我做了一个快速的谷歌，并希望看到一个 onClick 处理程序。