【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

相关推荐
baiduopenmap2 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish10 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
请叫我欧皇i22 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
躺平的花卷25 分钟前
Python爬虫案例八:抓取597招聘网信息并用xlutils进行excel数据的保存
爬虫·excel
533_25 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
爱编程的小生26 分钟前
Easyexcel(2-文件读取)
java·excel
程序员如山石27 分钟前
Excel的图表使用和导出准备
excel
guokanglun31 分钟前
空间数据存储格式GeoJSON
前端
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html