【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

相关推荐
懒大王爱吃狼30 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
小牛itbull1 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨9 小时前
VUE+Vite之环境文件配置及使用环境变量
前端