【React】前端React 代码中预览展示excel文件

封装了ExcelView来展示excel文件,支持显示loading

1.安装依赖

复制代码
npm i @js-preview/excel
  1. 源码

    import React, { useEffect, useRef, useState } from 'react'
    import jsPreviewExcel, { JsExcelPreview } from '@js-preview/excel'
    import '@js-preview/excel/lib/index.css'
    import { Spin } from 'antd'

    export interface Props {
    fileInfo: string
    }

    const ExcelView = (props: Props) => {
    const { fileInfo } = props
    const excelContainerRef = useRef<HTMLDivElement | null>(null)
    const excelPreviewerRef = useRef<JsExcelPreview | null>(null) // 保存 myExcelPreviewer 的引用
    const [isLoading, setIsLoading] = useState<boolean>(true)

    useEffect(() => {
    const containerElement = excelContainerRef.current

    复制代码
     if (containerElement && !excelPreviewerRef.current) {
       // 初始化 myExcelPreviewer,并保存引用
       const myExcelPreviewer = jsPreviewExcel.init(containerElement)
       excelPreviewerRef.current = myExcelPreviewer
    
       setIsLoading(true) // 开始加载时设置 loading 状态
    
       myExcelPreviewer
         .preview(fileInfo)
         .then(() => {
           setIsLoading(false) // 预览完成后取消 loading 状态
           console.info('预览完成')
         })
         .catch((e) => {
           setIsLoading(false) // 预览失败后取消 loading 状态
           console.info('预览失败', e)
         })
     }

    }, [fileInfo])

    return (



    {isLoading && (

    <Spin size="large" />

    )}

    )
    }

    export default ExcelView

相关推荐
打小就很皮...10 分钟前
ShowCountCard 功能迭代:新增周月对比属性,完善数据可视化场景
前端·react.js·信息可视化
IT_陈寒19 分钟前
Redis性能翻倍的7个冷门技巧:从P5到P8都在偷偷用的优化策略!
前端·人工智能·后端
Moonbit30 分钟前
MoonBit Meetup 丨 手把手带你走进 AI 编程新世代
前端·后端·程序员
携欢31 分钟前
PortSwigger靶场之 CSRF where token is not tied to user session通关秘籍
前端·csrf
HHHHHY1 小时前
使用阿里lowcode,手搓一个Carousel 走马灯容器组件
前端·react.js
小芒果nana1 小时前
React入门-JSX
react.js
用户352120195601 小时前
React-router v7
前端
Mintopia1 小时前
⚡ AI 时代,全栈 Next.js 开发的激情在哪里?
前端·aigc·全栈
Hello123网站1 小时前
300多个Html5小游戏列表和下载地址
前端·html·html5
Stringzhua1 小时前
ElementUi【饿了么ui】
前端·ui·elementui