Tengo una aplicación Ionic React y quiero descargar datos como CSV. Por lo tanto, agregué react-papaparse , pero no puedo descargar los datos con la aplicación. Tan pronto como lo pruebo en el navegador, funciona bien.
Al final, quiero poder obtener datos almacenados en el teléfono, convertirlos de JSON a CSV y luego descargarlos al teléfono. Lo probé también con mis datos de búsqueda y con una matriz ficticia. Ninguno funcionó.
Pero cuando hago clic en el botón dentro del navegador, puedo guardar el archivo CSV generado. Por lo tanto, creo que mi código básico funciona, solo me falta una pieza para que funcione en el teléfono/emulador (estudio de 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 ExportCSVHaga una página de prueba que elimine todo excepto el código en el que desea enfocarse. De esa manera, puede concentrarse en implementar la descarga de archivos.
Por ejemplo:
return ( <CSVDownloader filename={'test.csv'} data={'columnOne,columeTwo\nrow1col1,row1col2\nrow2col1,row2col2'} bom={true} download={true}> <IonButton>Export CSV</IonButton> </CSVDownloader> );No estoy familiarizado con Ionic, pero ¿está seguro de que su código se ejecuta cuando hace clic en el botón exportar? Hice una búsqueda rápida en Google y esperaba ver un controlador onClick.
Lo resolví usando un sistema de archivos de condensador para escribir mi archivo CSV. Solo estoy escribiendo un nuevo archivo después de obtener los datos deseados con la API de almacenamiento de capacitores y analizarlos con papa parse.
Es importante agregar la encoding: Encoding.UTF8 al escribir el archivo para usarlo como txt o csv. De forma predeterminada, escribe datos codificados en base64.
Aquí está mi código de solución:
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