封装了ExcelView来展示excel文件,支持显示loading
1.安装依赖
npm i @js-preview/excel
-
源码
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.currentif (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