导入xlsx并解析为json

Question

我已经设置了一个拖放文件"区域在我的网页上使用material-ui-dropzone。接下来，我安装了SheetJS js-xlsx，它允许您解析xlsx数据。我的努力是让两者一起工作。我想我的拖放文件部分工作正常。但我不确定下一部分该怎么处理。我有一个函数handleChange，我已经尝试了各种各样的go，我认为这超出了我的技能水平。

有什么想法放在那里解析数据json?还是说SheetJS不是这项工作的理想工具?我看到它在npm上每周有近100万的下载量，而read-excel-file每周只有37K的下载量，所以我选择了SheetJS。

到目前为止我所做的是:

import React from "react";
import { Typography } from "@material-ui/core";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import { ThemeProvider } from "@material-ui/core/styles";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Box from "@material-ui/core/Box";
import { withStyles } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import { CSVReader } from "react-papaparse";
import { DataGrid } from "@material-ui/data-grid";
import { DropzoneArea } from "material-ui-dropzone";
import XLSX from "xlsx";
const testArray = [
{ ASIN: "ABC123", Rank: "£50", Sales: "£80" },
{ ASIN: "ZYX123&", Rank: "£70", Sales: "£20" }
];
class App extends React.Component {
state = {
inputText: "",
outputText: "",
parsedData: [],
myRows: [],
myColumns: [],
files: null
};
columns;
rows;
handleChange = (files) => {
this.setState({ files: files });
// console.log(files);
// console.log(this.state.files);
// const workbook = XLSX.read(files);
};
render() {
return (
<>
{/* <ThemeProvider theme={theme}> */}
<Grid container justify="center">
<Box mt={0} width={1100}>
<Paper>
<Box p={3} mt={2} mb={2}>
<Grid container spacing={0}>
<Grid item xs={6}>
<Typography variant="h6" gutterBottom={false}>
PPC Cruncher
</Typography>
</Grid>
{/* TODO: */}
<Grid item xs={6} align="right"></Grid>
<Grid item xs={12} align="right">
<DropzoneArea onChange={this.handleChange} />
</Grid>
{/* <Grid item xs={12} align="left">
<div style={{ height: 400, width: '100%' }}>
<DataGrid
rows={this.state.myRows}
columns={this.state.myColumns}
pageSize={5}
checkboxSelection
/>
</div>
</Grid> */}
</Grid>
</Box>
</Paper>
</Box>
</Grid>
{/* </ThemeProvider> */}
</>
);
}
}
export default withStyles(useStyles)(App);

有什么想法或建议吗?

Answer 1

我最近遇到了这个问题，对于遇到类似问题的人，以下是我的解决方案:

// use onDrop instead of onChange
<DropzoneArea onDrop={(files) => this.handleChange(files)} />
handleChange = (files) => {
// files is an array of file
// if I just want the first file
const file = files[0];
let reader = new FileReader();
reader.onload = function(e) {
let data = new Uint8Array(e.target.result);
let workbook = XLSX.read(data, {type: 'array'});
// find the name of your sheet in the workbook first
let worksheet = workbook.Sheets['Sheet1'];
// convert to json format
const jsonData = XLSX.utils.sheet_to_json(worksheet);
};
reader.readAsArrayBuffer(file);
}

这里的大部分信息可以在SheetJS文档中找到。