【React】React预览docx文件

React预览docx文件

封装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
相关推荐
黄毛火烧雪下5 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
猿榜1 小时前
js逆向-喜某拉雅Xm-Sign参数解密
javascript
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Mintopia1 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia1 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js
随笔记2 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
fightingles2 小时前
使用useOptimistic优雅实现状态预更新
react.js
小脑斧呀2 小时前
React 的挂载都发生了什么
react.js
前端Hardy2 小时前
HTML&CSS:超丝滑的动态导航菜单
javascript·css·html
前端Hardy2 小时前
HTML&CSS:你绝对没见过的input输入框,确定不看看吗
javascript·css·html