![3948]( "3948")
本文介绍了如何在ReactJS中以JSON格式从excel中获取数据?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要从 excel 中获取数据并将其以 Json 格式存储为键值对.我如何在 React 中做到这一点?
Excel 数据-
预期的 o/p-
{"段": "空气","TripName":"测试 UI 流程","开始日期":"6/19/2020","endDate":"6/25/2020","总票价":"3948"}
解决方案
这里是一种将 (xlsx) Excel 文件转换为 json 的方法.我已经使它从本地文件系统(即桌面等)获取文件.但您可以轻松地将其转换为从服务器获取文件.
import React, { useState } from "react";导入./App.css"；从xlsx"导入 * 作为 XLSX；class ExcelToJson 扩展了 React.Component {构造函数(道具){超级(道具)；this.handleClick = this.handleClick.bind(this);this.state = {文件: ""，};}句柄点击(e){this.refs.fileUploader.click();}文件路径集(e){e.stopPropagation();e.preventDefault();var file = e.target.files[0];控制台日志(文件)；this.setState({文件});控制台.log(this.state.file);}读取文件(){var f = this.state.file;var name = f.name;const reader = new FileReader();reader.onload = (evt) =>{//evt = on_file_select 事件/* 解析数据 */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);//显示读取excel数据console.log(this.convertToJson(data));//以json格式显示数据};reader.readAsBinaryString(f);}convertToJson(csv) {var lines = csv.split("\n");var 结果 = [];var headers = lines[0].split(",");for (var i = 1; i {this.readFile();}}>读取文件
);}}导出默认 ExcelToJson；
readFile 函数中的控制台日志为您获取 json 中的数据.
I need to fetch the data from excel and store it in Json format as key value pair. How can i do it in React?
Excel Data-
Expected o/p-
{"Segment": "Air","TripName":"Test UI Flow","startDate":"6/19/2020","endDate":"6/25/2020","totalFare":"3948"}
解决方案
Here is a method to convert (xlsx) Excel files into json. I have made it to get file from local file system i.e Desktop etc. But you can easily convert it to fetch files from server.
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) => {
// evt = on_file_select event
/* Parse data */
const bstr = evt.target.result;
const wb = XLSX.read(bstr, { type: "binary" });
/* Get first worksheet */
const wsname = wb.SheetNames[0];
const ws = wb.Sheets[wsname];
/* Convert array of arrays */
const data = XLSX.utils.sheet_to_csv(ws, { header: 1 });
/* Update state */
console.log("Data>>>" + data);// shows that excel data is read
console.log(this.convertToJson(data)); // shows data in json format
};
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 result; //JavaScript object
return JSON.stringify(result); //JSON
}
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;
The console log in readFile function gets you the data in json.
这篇关于如何在ReactJS中以JSON格式从excel中获取数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！