我们如何在 ReactJS 中读取多个工作表的 excel 文件

Question

我是 ReactJS 的新手，我想在一个 excel 文件中读取多张工作表，然后将一个工作表 ID 分配给第二个工作表 ID。在输出中，我创建了两个具有折叠效果的按钮，并在其中创建了两个表格。一个表对应一个按钮，第二个表对应第二个表，它们的数据也被读取到一个 excel 文件中。

我使用 SheetJS 来解决这个问题，但它只适用于一个 Excel 表。

这是我的代码框链接： https://codesandbox.io/s/vigorous-dijkstra-4rcs9?file=/src/App.js

Answer 1

您好，我已经能够实现数组缓冲区，下面是检查您的文件的代码

import React, { useState } from "react";
import { Table } from "react-bootstrap";
import * as XLSX from "xlsx";
import Accordion from "./component/accordion";
import "./styles.css";

function App() {
  const [items, setItems] = useState([]);

  //   const readExcel = (file) => {
  //     const promise = new Promise((resolve, reject) => {
  //       const fileReader = new FileReader();
  //       fileReader.readAsArrayBuffer(file);
  //       fileReader.onload = (e) => {
  //         console.log("here0", e.target.result);
  //         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);
  //         console.log("here1 ", data);
  //         resolve(data);
  //       };
  //       fileReader.onerror = (error) => {
  //         console.log("here2", error);
  //         reject(error);
  //       };
  //     });
  //     promise.then((d) => {
  //       console.log("here3");
  //       setItems(d);
  //     });
  //   };
  // }
  const handleFiles = (files) => {
    console.log(files);
    files.map((file) =>{
      var reader = new FileReader();
      reader.readAsArrayBuffer(file);
      reader.onload = (e) => {
        const data = reader.result;
        console.log("loaded ", data);
        setItems([...items, data]);
      };
    });
  };
  console.log(items);
  return (
    <div className="container-fluid">
      <section className="heading">
        <h4>Products Details</h4>
        <input
          type="file"
          className="input-field"
          accept=".csv, .xlsx,.xls,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
          onChange={(e) => {
            const file = [...e.target.files];
            console.log("here", file);
            // const file1 = e.target.files[1];
            handleFiles(file);
          }}
          multiple
        />
      </section>
      {items.map((d) => (
        <Accordion
          key={d.ID}
          title={
            <div>
              <tr key={d.ID} className="btn-heading">
                <td>{d.ID}</td>
                <td>{d.Mail}</td>
                <td>{d.Name}</td>
                <td>{d.PhoneNo}</td>
                <td>{d.City}</td>
                <td>{d.Date}</td>
                <td>{d.Time}</td>
              </tr>
            </div>
          }
          content={
            <div>
              <p className="header">
                <span className="header-content">Shipping Address:</span>
                292 Naqshband Colony. Near rabbania Mosque. Multan
              </p>
              <Table size="sm">
                <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.ArticleNo}>
                      <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>
          }
        />
      ))}
    </div>
  );
}
export default App;

这里是sandbox

我还没有完成您的代码，它只是一个示例，您可以如何实现它。我获取了文件对象并将其映射到您可以在其中定义的其余操作。