Estoy tratando de exportar datos como csv en una aplicación de reacción sin una biblioteca. Mi código se ve así:
const download = () => { const dummyData = 'rahul,delhi,accountsdept\n'; const csvContent = `data:text/csv;charset=utf-8,${dummyData}`; const encodedURI = encodeURI(csvContent); window.open(encodedURI); }
Y luego tengo un botón con esta función de descarga como un clic.
<button onClick={download}> Generate Vehicle Offer Prices </button>
Se supone que esto funciona en javascript vainilla, ¿hay alguna razón por la que no funciona en reaccionar?
Aquí hay un sandbox con el código que no funciona en react sandbox
Aquí hay un enlace con él trabajando en vanilla js vanilla
Puede usar la biblioteca NPM: https://www.npmjs.com/package/react-csv
Ejemplo
import {CSVLink, CSVDownload} from 'react-csv'; const csvData =[ ['rahul', 'delhi', 'accountsdept'] ]; <CSVLink data={csvData} >Download me</CSVLink>
O
<CSVDownload data={csvData} target="_blank" />
Está funcionando en realidad, mira aquí :
import "./styles.css"; export default function App() { const download = () => { const dummyData = "rahul,delhi,accountsdept\n"; const csvContent = `data:text/csv;charset=utf-8,${dummyData}`; const encodedURI = encodeURI(csvContent); window.open(encodedURI); }; return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <button onClick={download}>Generate Vehicle Offer Prices</button> </div> ); }