React：实现预览展示docx和Excel文件

封装DocxView组件，用于显示docx文件的预览，支持加载loading效果。

安装依赖

npm i docx-preview

导入：

import React, { useEffect, useRef, useState } from 'react'

import * as docx from 'docx-preview'

import { Spin } from 'antd'

import { askDocApiUrls } from 'src/shared/url-map'

export interface Props {

  fileInfo: string

}

const DocxView = (props: Props) => {

  const { fileInfo } = props

  const [isLoading, setIsLoading] = useState<boolean>(true)

  const docxContainerRef = useRef<HTMLDivElement | null>(null)

  useEffect(() => {

    const fetchData = async () => {

      try {

        const response = await fetch(fileInfo)

        const data = await response.blob()

        const containerElement = docxContainerRef.current

        if (containerElement) {

          docx.renderAsync(data, containerElement).then(() => {

            console.info('docx: finished')

            setIsLoading(false)

          })

        }

      } catch (error) {

        setIsLoading(false)

        console.error('Error fetching or rendering document:', error)

      }

    }

    fetchData()

  }, [fileInfo])

  return (

    <div className="relative h-full">

      <div ref={docxContainerRef} className="h-full" />

      {isLoading && (

        <div className="absolute inset-0 flex items-center justify-center bg-white bg-opacity-75">

          <Spin size="large" />

        </div>

      )}

    </div>

  )

}

export default DocxView

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 (

    <div className="relative h-full">

      <div ref={excelContainerRef} className="h-full" />

      {isLoading && (

        <div className="absolute inset-0 flex items-center justify-center bg-white bg-opacity-75">

          <Spin size="large" />

        </div>

      )}

    </div>

  )

}

export default ExcelView