React实现在线预览word报告/本地选择报告预览

标题使用的核心技术点是docx-preview,读取到文件的File对象,用File去做文件展示,这里是才用将文件转base64字符串存储到localStorage中

在线预览word报告且包含word样式

  1. 下载需要使用的min.js文件进项目的public目录中(上zip已包含以下pulib内的js/css文件)

    2.在public文件目录下新建html,命名为docpreview.html
    3.在html中引入public下的资源

    <link href="./docx-preview/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> <script src="./docx-preview/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous" ></script> <script src="./docx-preview/jszip.min.js"></script> <script src="./docx-preview/docx-preview.min.js"></script> <script src="./docx-preview/thumbnail.example.js"></script> <link href="./docx-preview/thumbnail.example.css" rel="stylesheet" /> <script crossorigin src="./docx-preview/tiff.js"></script>
    复制代码
     <script src="./docx-preview/tiff-preprocessor.js"></script>

4.创建dom去展示对应的docx文件

复制代码
<body class="vh-100 d-flex flex-column">
    <div class="flex-grow-1 d-flex flex-row" style="height: 0">
      <div
        id="document-container"
        class="overflow-auto flex-grow-1 h-100"
      ></div>
    </div>
  </body>

5.创建一个基于Web的文档查看器,用于查看和预览Microsoft Word文档。

1.获取当前文档(currentDocument):通过document.querySelector('#document-container')获取一个用于显示文档内容的HTML元素。

2.设置docx选项:使用Object.assign()方法将docx.defaultOptions与一个包含debug和experimental属性值的对象进行合并。

3.获取加载按钮(loadButton):通过document.querySelector('#loadButton')获取一个用于加载文档的按钮。

4.定义renderDocx函数:一个异步函数,用于渲染Word文档。它接受一个文件参数(file),将其转换为Blob对象,然后使用docx.renderAsync()方法将其渲染到指定的容器中。同时,它还调用renderThumbnails()函数来生成文档的缩略图。

5.处理加载文档按钮的点击事件:当用户点击加载按钮时,调用renderDocx()函数并传入当前文档

复制代码
<script>
      let currentDocument = null
      const docxOptions = Object.assign(docx.defaultOptions, {
        debug: true,
        experimental: true
      })

      const container = document.querySelector('#document-container')

      const loadButton = document.querySelector('#loadButton')

      async function renderDocx(file) {
        currentDocument = file
        if (!currentDocument) return
        let docxBlob = preprocessTiff(currentDocument)
        let res = await docx.renderAsync(docxBlob, container, null, docxOptions)
        renderThumbnails(
          container,
          document.querySelector('#thumbnails-container')
        )
      }
    </script>

6.读取本地存储的文件base64并展示

复制代码
<script>
      // base64Data是从后端接收到的Base64字符串
      const base64String = localStorage.getItem('base64String')

      // 将Base64字符串转换为Blob对象
      const byteCharacters = atob(base64String)
      const byteNumbers = new Array(byteCharacters.length)
      for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i)
      }
      const byteArray = new Uint8Array(byteNumbers)
      const blob = new Blob([byteArray], { type: 'application/octet-stream' })

      // 将 Blob 对象转换为 File 对象
      const file = new File([blob], 'example.docx', {
        type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
      })
      //调用方法
      renderDocx(file)
    </script>

7.触发预览按钮的事件

复制代码
  //预览报告
  function previewReportRequest() {
    setsubmitLoading(true)
    asyncActionCreators.previewReport({ id: ID }).then((response) => {
      setsubmitLoading(false)
      if (response?.data?.code === 0) {
        localStorage.setItem('base64String', response?.data?.data)
        //存好之后,跳转到预览页面
        const htmlFilePath = `${window.location.origin}/docpreview.html`
        openHtmlFileInNewTab(htmlFilePath)
      } else {
        message.warning(response.data.msg || '获取报告失败')
      }
    })
  }


  const openHtmlFileInNewTab = (url) => {
    const anchor = document.createElement('a')
    anchor.href = url
    anchor.target = '_blank'
    anchor.rel = 'noopener noreferrer'
    anchor.click()
  }

本地选择文件后预览需做以下改动

1.设一个input选取文件

复制代码
<input type="file" accept=".docx" onChange={handleLocalFilePreview} />

2.添加文件选择方法

复制代码
const handleLocalFilePreview = (event) => {
    const file = event.target.files[0]
    const reader = new FileReader()
    // 将 Blob 数据编码为 Base64 字符串
    reader.onload = (event) => {
      const base64String = event.target.result
      localStorage.setItem('base64String', base64String)
    }
    reader.readAsDataURL(file)
  }

3.预览按钮的事件 openHtmlFileInNewTab同在线预览

复制代码
  const docxPreview = () => {
    const htmlFilePath = `${window.location.origin}/docpreview.html`
     openHtmlFileInNewTab(htmlFilePath)
  }

4.html文件需要改变方法

复制代码
<script>
      //==========之前的===========
      //获取存储的blob的base64字符串
       const base64String = localStorage.getItem('base64String')
       // 将 Base64 字符串解码为 Blob 对象
       const byteCharacters = atob(base64String?.split(',')?.[1])
       const byteNumbers = new Array(byteCharacters.length)
       for (let i = 0; i < byteCharacters.length; i++) {
         byteNumbers[i] = byteCharacters.charCodeAt(i)
       }
       const byteArray = new Uint8Array(byteNumbers)
       const blob = new Blob([byteArray])
       const file = new File([blob], 'example.docx', {
         type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
      })

      // 将 Blob 对象转换为 File 对象
      const file = new File([blob], 'example.docx', {
        type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
      })
      //调用方法
      renderDocx(file)
    </script>
相关推荐
举个栗子dhy2 小时前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
揭老师高效办公3 小时前
在Word和WPS文字中便捷切换英文段落大小写
word·wps文字
薛定谔的算法3 小时前
《虚拟 DOM 与 Diff 算法:用 1500 字把它讲成“人话”》
前端·react.js·前端框架
鹏多多4 小时前
前端项目eslint配置选项详细解析
前端·vue.js·react.js
知识分享小能手5 小时前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
牧羊狼的狼10 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手11 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲11 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
CodeCraft Studio14 小时前
国产化Word处理组件Spire.DOC教程:使用 Python 将 Markdown 转换为 HTML 的详细教程
python·html·word·markdown·国产化·spire.doc·文档格式转换