js-xlsx

1. 使用预览

import React, { useState } from 'react'
import { Table, Upload, Button } from 'antd'
import * as XLSX from 'xlsx';
import axios from 'axios';


interface IProps { }

const Index: React.FC<IProps> = () => {
    const [data, setData] = useState<any>([]);

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

        reader.onload = (e: any) => {
            const data = new Uint8Array(e.target.result);
            const workbook = XLSX?.read(data, { type: 'array' });
            const worksheet = workbook?.Sheets[workbook.SheetNames[0]];
            const jsonData = XLSX?.utils?.sheet_to_json(worksheet, { header: 1 });
            setData(jsonData);
        };
        reader.readAsArrayBuffer(file);
    };

    const handleDownload = async () => {
        try {
          const response = await axios.get('https://cdn.poizon.com/search/transaction/10125038/20230619-b2c438ce7caa3d39.xlsx', {
            responseType: 'blob',
          });
    
          const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
          const reader = new FileReader();
    
          reader.onload = (e: any) => {
            const data = new Uint8Array(e.target.result);
            const workbook = XLSX.read(data, { type: 'array' });
            const worksheet = workbook.Sheets[workbook.SheetNames[0]];
            const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
            setData(jsonData);
          };
    
          reader.readAsArrayBuffer(blob);
        } catch (error) {
          console.error(error);
        }
      };

    return (
        <div>
            <input type="file" onChange={handleFileUpload} />
            <button onClick={handleDownload}>下载并预览</button>
            {data.length > 0 && (
                <Table
                  showHeader={false}
                  bordered
                  dataSource={data.slice(0, 10)} // 显示前10行数据
                  columns={Object.keys(data[0]).map((key) => {
                      return ({ title: key, dataIndex: key })
                  })}
                />
            )}
        </div>
    )
}

export default Index;