客户端读取并显示XLXS文件

我们可以借助第三方类库进行功能的实现：比如

Frameworks and Bundlers | SheetJS Community Edition

第一步：安装

第二步：内容的引入

import * as XLSX from 'xlsx'
import { useState } from "react";

export default function App() {
    const [data,setData] = useState([]);

    const handeFileUpload = (e) => {
        const reader = new FileReader();  //创建文件读取器
        reader.readAsBinaryString(e.target.file[0]); //读取文件内容
        reader.onload = (e) => {
            const data = e.target.result; //获取读取结果
            console.log(data) //打印的是二进制的数据信息，所以我们可以使用XLSX进行数据的一个读取
            const workbook = XLSX.read(data,{type:"binary"}); //以二进流方式读取得到
            const sheetName = workbook.SheetNames[0]; //获取表名
            const sheet = workbook.Sheets[sheetName]; //根据表面获取表
            const parseData = XLSX.utils.sheet_to_json(sheet); //解析表数据
            console.log(parseData); //此时打印的则是excel中的表格内容
            setData(parseData)
        }
    };
  return (
    <div>
        <h1>客户端读取并显示XLXS文件</h1>
        <input type="file" accept='.xlsx,.xls' onChange={handeFileUpload} />

        {/* 写一个判断 */}
        {data.length > 0 && (
            <table>
                {/* 表头 */}
                <thead>
                    <tr>
                        {Object.keys(data[0]).map((key,index) => (
                            <th key={index}>{key}</th>
                        ))}
                    </tr>
                </thead>
                <tbody>
                    {data.map((item,index) => {
                        return <tr key={index}>
                            {Object.keys(item).map((key,index) => {
                                return <td key={index}>{item[key]}</td>
                            })}
                        </tr>
                    })}
                </tbody>
            </table>
        )}
    </div>
  )
}

以下就是实现的效果

希望以上内容对您有所帮助