【React】前端React 代码中预览展示excel文件
封装了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(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