1 安装依赖

npm install xlsx

2 demo

'use client';
import { ProColumns, ProTable } from '@ant-design/pro-components';
import React, { useState } from 'react';
import * as XLSX from 'xlsx';
import './styles.css';

const PreInvestigation: React.FC = () => {
  const [data, setData] = useState<unknown[]>([]);

  const handleFileUpload = (event: any) => {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onload = (e) => {
      console.log('File loaded');
      const arrayBuffer = e.target?.result;
      console.log('ArrayBuffer:', arrayBuffer);
      const workbook = XLSX.read(arrayBuffer, { type: 'array' });
      console.log('Workbook:', workbook);
      const firstSheetName = workbook.SheetNames[0];
      console.log('First Sheet Name:', firstSheetName);
      const worksheet = workbook.Sheets[firstSheetName];
      console.log('Worksheet:', worksheet);
      const jsonData = XLSX.utils.sheet_to_json(worksheet);
      console.log('JSON Data:', jsonData);
      setData(jsonData);
    };

    reader.readAsArrayBuffer(file);
  };

  return (
    <>
      <div style={{ marginTop: 100 }}>
        <input type="file" onChange={handleFileUpload} accept=".xlsx, .xls" />
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
    </>
  );
};

export default PreInvestigation;

3 效果展示

2.png

3.png