使用 Papa Parse 将 JSON 导出为 CSV

Question

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

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

但是当我点击浏览器中的按钮时，我能够保存生成的CSV文件。因此，我认为我的基本代码可以正常工作，我只是缺少一块使其在 phone/emulator（android 工作室）上工作。

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

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

例如：

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

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

Answer 2

通过使用 capacitor filesystem for writing my CSV file. I am just writing a new file after fetching my desired data with capacitor storage API 并使用 papa parse 解析解决了它。

重要的是在写入文件时添加 encoding: Encoding.UTF8 以将其用作 txt 或 csv。默认情况下，它写入 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

使用 Papa Parse 将 JSON 导出为 CSV

Export JSON as CSV with Papa Parse

javascript

download

reactjs

ionic-framework

papaparse