VUE3中实现word的预览功能

最新推荐文章于 2025-06-27 23:16:37 发布

原创最新推荐文章于 2025-06-27 23:16:37 发布 · 5.3k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#word #vue.js #docx-preview

前端同时被 2 个专栏收录

98 篇文章

订阅专栏

VUE

31 篇文章

订阅专栏

本文档展示了如何在Vue应用中利用docx-preview库来预览Word文档。首先通过cnpm安装docx-preview，然后在Vue组件中引入相关模块和配置。在httpGetBlob获取到文档blob数据后，使用renderAsync方法在指定的ref中渲染文档，同时提供了详细的渲染选项以调整显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装docx-preview

 cnpm i docx-preview --save

在vue文件中使用

 <div ref="refWord" v-if="showType === 'word'" />

<script setup name="ResPreviewBox">
  import { ref } from 'vue' 
  import { httpGet, httpGetBlob } from '../utils/request'
  import { defaultOptions, renderAsync } from 'docx-preview'

  const refWord = ref(null)
  const showType = ref('word')


  httpGetBlob(downloadResource).then(blobData => {
      if (blobData ) {
        if (showType.value === 'word') {
          const options = {
            className: 'docx', // 默认和文档样式类的类名/前缀
            inWrapper: true, //  启用围绕文档内容渲染包装器
            ignoreWidth: false, //  禁止页面渲染宽度
            ignoreHeight: false, //  禁止页面渲染高度
            ignoreFonts: false, //  禁止字体渲染
            breakPages: true, //  在分页符上启用分页
            ignoreLastRenderedPageBreak: true, //  禁用lastRenderedPageBreak元素的分页
            experimental: false, //  启用实验性功能（制表符停止计算）
            trimXmlDeclaration: true, //   如果为真，xml声明将在解析之前从xml文档中删除
            debug: false, //  启用额外的日志记录
            useBase64URL: true, // 如果为true，图片、字体等将被转换为base 64 URL，否则使用URL.createObjectURL
            useMathMLPolyfill: false, //  包括用于 chrome、edge 等的 MathML polyfill。
            showChanges: false // 启用文档更改（插入/删除）的实验性呈现
          }
          renderAsync(blobData , refWord.value, null, options)
        }
      }

</script>

预览效果