The ReactJS demo for js-xlsx is very unclear to me

Sorry if I am not skilled enough to understand the demo, but this page: https://github.com/SheetJS/js-xlsx/tree/master/demos/react is very unclear to me and I still don’t get how this library has to be used in ReactJS.

How do we have to use this object

{
  cols: [{ name: "A", key: 0 }, { name: "B", key: 1 }, { name: "C", key: 2 }],
  data: [
    [ "id",    "name", "value" ],
    [    1, "sheetjs",    7262 ],
    [    2, "js-xlsx",    6969 ]
  ]
}

and download it as a xlsx? Please help!

[SheetJSDev]

If the demo doesn’t make sense, we probably are missing something. Here’s a longer explanation. If this makes sense, please let us know how to improve the README:

To run the demo, clone the repo and go to that subdirectory (/demos/react) and run make && make react, then go to http://localhost:8000 to see the demo.

You should see something like:

Then select a spreadsheet by clicking the file input button or dragging and dropping a file like Book1.xlsx – you can click and download it.

If you add the line console.log(this.state); at the top of the exportFile function, you can see the state when the file is generated:

That object represents the state that the example uses. https://github.com/SheetJS/js-xlsx/blob/master/demos/react/sheetjs.jsx is the demo component used in the web examples.

this.state.data is an array of arrays, so the exportFile function just converts that part of the state:

/* convert state.data to worksheet */
const ws = XLSX.utils.aoa_to_sheet(this.state.data);
/* build a workbook */
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
/* generate XLSX file and send to client */
XLSX.writeFile(wb, "sheetjs.xlsx")

The callback is triggered when a certain button is clicked:

<button disabled={!this.state.data.length} className="btn btn-success" onClick={this.exportFile}>Export</button>

On the read side, the state is set when you process a file.

If that explanation makes sense, please feel free to submit a PR to clarify the README.

[dave-wind]

react ant design you can try to see https://github.com/dave-wind/excel