React實現(xiàn)預覽展示docx和Excel文件

更新時間：2024年02月03日 16:14:26 作者：郭_昊

這篇文章主要為大家詳細介紹了如何使用React實現(xiàn)預覽展示docx和Excel文件,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

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

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 狀態(tài)

      myExcelPreviewer
        .preview(fileInfo)
        .then(() => {
          setIsLoading(false) // 預覽完成后取消 loading 狀態(tài)
          console.info('預覽完成')
        })
        .catch((e) => {
          setIsLoading(false) // 預覽失敗后取消 loading 狀態(tài)
          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

以上就是React實現(xiàn)預覽展示docx和Excel文件的詳細內容，更多關于React預覽文件的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: