回答您的其他问题：

Question

我是新来的反应者，到目前为止我可以成功上传excel文件。

这是我的渲染方法：

render() {
    return (
      <div className="cardUploader">
        <div className="card">
          <ControlLabel>
            <PageHeader>
              <h4>&nbsp;CARD UPLOADER</h4>
            </PageHeader>
          </ControlLabel>

          <div onSubmit={this.onFormSubmit}>
            <input
              type="file"
              name="file"
              accept=".xlsx"
              onChange={e => this.onChange(e)}
            />
          </div>
        </div>
      </div>
    );
  }

这是加载excel文件的方法：

 onChange(e) {
    let files = e.target.files;

    //creating a file reader object
    let reader = new FileReader();
    reader.readAsDataURL(files[0]);

    //Checking whether the file is loaded or not
    reader.onload = e => {
      console.log("File loaded", e.target.result);
    };
  }

到现在为止它工作正常。我需要将excel数据转换为反应表数据并存储在反应表中，是否有任何方法可以将excel工作表中的数据转换为反应表数据？

Answer 1

xlsx是一种压缩文件类型，包含多个xml文件。因此，您首先必须解压缩文件，提取其内容，然后打开正确的xml子文件并解析该xml，...

正如其他人指出的那样，几乎不可能在客户端进行此操作。

如果您真的想在客户端解析电子表格数据，我建议改为选择csv格式。 Excel可以导出到csv文件。而且它们很容易解析。

回答您的其他问题：

这取决于csv中数据的结构。但是，假设您在csv中有2列，其中一列包含名称，一列包含描述。对于react表，您将需要data和columns数组。

const rows = csvData.split("\n")`; //will split your data in multiple lines,  

const data = [];
for (let row of rows) {  
  const cells = row.split(";"); 
  const name = cells.length < 0 ? "-" : cells[0];
  const description = cells.length < 1 ? "-" : cells[1];
  const rowData = { name, description };
  data.push(rowData);
}

const columns = [
  {Header: "Name", accessor: "name"}, 
  {Header:"Description", accessor: "description"}
];

所有这些都假定您以如下方式呈现ReactTable：

return (<ReactTable data={data} columns={columns} />);

它假定您的csvData看起来像：

const csvData = "name1;description1;\n name2;description2";

打开这些文件之一并查看它们使用的分隔符非常重要。 CSV可以使用";"或","。

注意：另一种常见做法是使用CSV文件的第一行来保存数据标题。这样就可以从csv数据的第一行创建标头。对于用户而言，这意味着他可以使某些列为可选列，或重新排列它们。

将Excel数据转换为React Table数据

1 个答案:

回答您的其他问题：