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

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

1.安装依赖

npm i @js-preview/excel

2. 源码

   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