【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(null)  const excelPreviewerRef = useRef(null) // 保存 myExcelPreviewer 的引用  const [isLoading, setIsLoading] = useState(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 && (                                )}      )}export default ExcelView