convert json to excel react code example
Example: react convert excel to json
import React, { useState } from "react";
import "./App.css";
import * as XLSX from "xlsx";
class ExcelToJson extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
file: "",
};
}
handleClick(e) {
this.refs.fileUploader.click();
}
filePathset(e) {
e.stopPropagation();
e.preventDefault();
var file = e.target.files[0];
console.log(file);
this.setState({ file });
console.log(this.state.file);
}
readFile() {
var f = this.state.file;
var name = f.name;
const reader = new FileReader();
reader.onload = (evt) => {
const bstr = evt.target.result;
const wb = XLSX.read(bstr, { type: "binary" });
const wsname = wb.SheetNames[0];
const ws = wb.Sheets[wsname];
const data = XLSX.utils.sheet_to_csv(ws, { header: 1 });
console.log("Data>>>" + data);
console.log(this.convertToJson(data));
};
reader.readAsBinaryString(f);
}
convertToJson(csv) {
var lines = csv.split("\n");
var result = [];
var headers = lines[0].split(",");
for (var i = 1; i < lines.length; i++) {
var obj = {};
var currentline = lines[i].split(",");
for (var j = 0; j < headers.length; j++) {
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
return JSON.stringify(result);
}
render() {
return (
<div>
<input
type="file"
id="file"
ref="fileUploader"
onChange={this.filePathset.bind(this)}
/>
<button
onClick={() => {
this.readFile();
}}
>
Read File
</button>
</div>
);
}
}
export default ExcelToJson;