如何使用reactjs从Excel文件中单独获取多个表

问题描述

我具有以下读取excel文件的功能：

const readExcel=(file) => {
    const promise = new Promise((resolve,reject)=>{
      const fileReader = new FileReader();
      fileReader.readAsArrayBuffer(file);
      fileReader.onload=(e)=>{
        const bufferArray = e.target.result;
        const wb = XLSX.read(bufferArray,{type: "buffer"});
        const wsname = wb.SheetNames[0];
        const ws = wb.Sheets[wsname];
     
        const data = XLSX.utils.sheet_to_json(ws);
        resolve(data);
      };
      fileReader.onerror=(error) => {
        reject(error);
      };
    });
    promise.then((d)=>{
      setItems(d);
     
    });
  };

我想分别访问两个表数据并分别显示此数据。如何做到这一点？

这是我的渲染HTML代码：

<div>
  {items.map((d) => (
    <Accordion 
      title={
        <tr key={d.Table2} className="btn-heading">
          <td style={{padding: "0px 36px"}}>{d.ID}</td>
          <td style={{padding: "0px 16px"}}>{d.Mail}</td>
          <td style={{padding: "0px 67px"}}>{d.Name}</td>
          <td style={{padding: "0px 3px"}}>{d.PhoneNo}</td>
          <td style={{padding: "0px 98px"}}>{d.City}</td>
          <td style={{padding: "0px 6px"}}>{d.Date}</td>
          <td style={{padding: "0px 120px"}}>{d.Time}</td>
        </tr>
      }
      content={
        <table>
          <thead>
            <tr>
              <th>#</th>
              <th>Article No</th>
              <th>Product Name</th>
              <th>Quantity</th>
              <th>Price</th>
              <th>Total Amount</th>
            </tr>
         </thead>
         <tbody>
          {items.map((c) => (
            <tr key={c.Table1}>
              <td>#</td>
              <td>{c.ArticleNo}</td>
              <td>{c.ProductName}</td>
              <td>{c.Quantity}</td>
              <td>{c.Price}</td>
              <td>{c.TotalAmount}</td>
            </tr>
          ))}
        </tbody>
      </table>
     }
    />
  ))}
</div>         

运行此命令后，它将显示两个合并表。

这是codeandBox链接：

https://codesandbox.io/s/misty-https-tv5t1?file=/src/App.js

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）