Блог

Я новичок в ReactJS, я хочу прочитать несколько листов в файле Excel, а после этого присвоить идентификатор одного листа идентификатору второго листа. И на выходе я создал две кнопки с эффектом свертывания, и в этом я создал две таблицы. Одна таблица против одной кнопки и вторая таблица против второй таблицы, также их данные считываются в файле Excel.

Я использую SheetJS для решения этой проблемы, но это работает только для одного листа Excel.

Вот моя ссылка на codesandbox:https://codesandbox.io/s/vigorous-dijkstra-4rcs9?file=/src/App.js

Привет, я смог получить буфер массива, и вот приведенный ниже код проверки с вашими файлами

 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.resu<
  //         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;
  

Вот песочница

Я не завершил ваш код, это просто пример того, как вы можете этого добиться. Я взял объект file и сопоставил с ним остальные действия, которые вы можете определить там.