客户端读取并显示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 (
    

        
客户端读取并显示XLXS文件
        

        {/* 写一个判断 */}
        {data.length > 0 && (
            
                {/* 表头 */}
                
                        {Object.keys(data[0]).map((key,index) => (
                            
                        ))}
                    
                    {data.map((item,index) => {
                        return 
                            {Object.keys(item).map((key,index) => {
                                return 
                            })}
                        
                    })}
                

                    
{key}
                
                
{item[key]}
            
        )}
    
  )
}

以下就是实现的效果

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