用PapaParse將JSON匯出為CSV

我有一個Ionic React應用程式，希望將資料下載為CSV。因此，我添加了react-papaparse，但我無法用應用程式下載資料。只要我在瀏覽器中嘗試，它就可以正常作業。

最后，我希望能夠獲取存盤在手機上的資料，將其從 JSON 轉換為 CSV，然后將其下載到手機上。我也嘗試了用我的 fetch 資料和用一個假陣列。兩者都沒有成功。

但是當我點擊瀏覽器內的按鈕時，我能夠保存生成的 CSV 檔案。因此，我認為我的基本代碼是有效的，我只是缺少一個部分來使它在手機/模擬器（android studio）上作業。

span class="hljs-keyword">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'/span>)。
        var mm = String( today.getMonth()   1) 。 padStart(2, '0'); /January is 0!
        var yyyy = today.getFullYear（）。

        today = dd   '-'/span>   mm   '-'/span>   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: "美國隊長"。
            顏色。"Blue & Red",
            武器: "Grit & Discipline".
          },
          {
            Name: "Tony Stark",
            Hero: "Ironman",
            顏色: "Red & Gold",
            武器: "Money & Mind".
          },
          {
            Name: "Banner博士"。
            Hero: "Hulk"。
            顏色: "Green",
            武器。"Mind & Anger".
          },
          {
            Name: "Dr. Strange"。
            Hero: "Dr. Strange",
            顏色。"Red"。
            武器。"魔法", 武器: "魔法".
          },
          {
            Name: "雷神",
            Hero: "雷神",
            顏色。"Multi",
            武器。"不朽", 武器: "不朽"//lt;CSVDownloader filename={filename} data={inputJSON} bom={true} download={true}><IonButton>Export CSV</IonButton></CSVDownloader>/span>

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

export default exportCSV

uj5u.com熱心網友回復：

制作一個測驗頁面，除了你想關注的代碼外，消除所有的東西。這樣你就可以專注于實作檔案下載。

例如：

return (
  <CSVDownloader
    filename={'test.csv'}。
    data={'columnOne,columeTwonrow1col1, row1col2nrow2col1,row2col2' }
    bom={true}'}。
    download={true}> 
    <IonButton>匯出CSV</IonButton> 
  </CSVDownloader>
);

我不熟悉Ionic，但你確定你的代碼在你點擊匯出按鈕時運行嗎？我做了一個快速的谷歌，希望看到一個onClick處理程式。

uj5u.com熱心網友回復：

通過使用capacitor filesystem來寫我的CSV檔案解決了這個問題。我只是在用capacitor存盤API獲取我想要的資料，并用papa parse對其進行決議后寫一個新檔案。

重要的是要添加encoding.UTF8

下面是我的解決方案。

以下是我的解決方案代碼：

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

class CsvButton extends React.Component {

    渲染（） {
            
        const saveFile = async() => {

            let {value} = await Storage.get（{key。'damage' })
            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   '-'/span>   mm   '-'/span>   yyyy;

            let filename = "damage_"   today   ".csv".

            await Filesystem.writeFile（{
                path: filename,
                data: csv,
                directory: Directory.Documents。
                encoding: Encoding.UTF8。
              });
          };
        
    return(
            <IonButton onClick={saveFile}> 匯出測驗</IonButton> 
    )
    }
}

export default CsvButton

標籤：

上一篇：用label_bquote為一個面的每一行指定不同的標簽

下一篇：無法洗掉useRef<HTMLIonInputElement>的值，當它被設定為ionic反應時