【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
相关推荐
www_pp_33 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim1 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架
장숙혜1 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang1 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
WKK_2 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
莫问alicia2 小时前
react 常用钩子 hooks 总结
前端·javascript·react.js
Mintopia2 小时前
图形学中的数学基础与 JavaScript 实践
前端·javascript·计算机图形学