html5 excel解析,json - How to parse Excel (XLS) file in Javascript/HTML5 - Stack Overflow

Thank you for the answer above, I think the scope (of answers) is completed but I would like to add a "react way" for whoever using react.

Create a file called importData.js:

import React, {Component} from 'react';

import XLSX from 'xlsx';

export default class ImportData extends Component{

constructor(props){

super(props);

this.state={

excelData:{}

}

}

excelToJson(reader){

var fileData = reader.result;

var wb = XLSX.read(fileData, {type : 'binary'});

var data = {};

wb.SheetNames.forEach(function(sheetName){

var rowObj =XLSX.utils.sheet_to_row_object_array(wb.Sheets[sheetName]);

var rowString = JSON.stringify(rowObj);

data[sheetName] = rowString;

});

this.setState({excelData: data});

}

loadFileXLSX(event){

var input = event.target;

var reader = new FileReader();

reader.onload = this.excelToJson.bind(this,reader);

reader.readAsBinaryString(input.files[0]);

}

render(){

return (

);

}

}

Then you can use the component in the render method like:

import ImportData from './importData.js';

import React, {Component} from 'react';

class ParentComponent extends Component{

render(){

return ();

}

}

would set the data to its own state, you can access Excel data in the "parent component" by following this: