使用vue预览Word文件

<template>
  <!-- 浏览Word -->
  <div
    ref="wrap"
    class="client-tabl"
  >
    <div v-if="headArr.length > 3" class="left">
      <!-- 侧边标题 -->
      <ul class="collapse">
        <li
          v-for="(item, index) in sideArr"
          :key="index"
          ref="menuLi"
          :class="{ wirte: iswrite == index }"
          @click="menuClick(item, index)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <!-- 渲染word文件 -->
    <div
      id="wordView"
      v-loading="loading"
      element-loading-text="加载中"
      v-html="vHtml"
    />
  </div>
</template>

下载第三方插件并引用

// npm install --save mammoth
import mammoth from 'mammoth'

name: 'Word',
  data() {
    return {
      // 内容头部目录
      headArr: ['一、业财融合', '1.1 营业外包', '1.1.1外包商合同查询'],
      // 侧边目录
      sideArr: ['一、业财融合', '1.1 营业外包', '1.1.1外包商合同查询', '1.1.2外包费调账管理', '1.1.3汇总清单查询', '1.1.4汇总账单报账'],
      iswrite: 0, // 用于侧边栏排他思想
      timer: null, // 定时器名称
      loading: true, // 用于elementui 加载插件
      vHtml: '',
      wordURL: '/templates/新手介绍手册/附件2省侧财辅操作手册_营业外包分册20211026.docx' // 此地方存放文件的地址
    }
  },
  created() {
    this.previewWord()
  },
  methods: {
  // 渲染 word 文件内容
    previewWord() {
      var vm = this
      const xhr = new XMLHttpRequest()
      xhr.open('get', this.wordURL, true)
      xhr.responseType = 'arraybuffer'
      xhr.onload = function() {
        if (xhr.status === 200) {
          mammoth
            .convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
            .then(function(resultObject) {
              vm.$nextTick(() => {
                vm.vHtml = resultObject.value
                vm.timers()
              })
            })
        }
      }
      xhr.send()
    },
    timers() {
      this.timer = setTimeout(() => {
        const inner = document.querySelectorAll('#wordView>h4')
        this.headArr.push(...inner)
        this.loading = false
      },)
    },
    // 此功能作用于 点击侧边栏 跳转到对应的内容头部标题
    menuClick(item, index) {
      this.iswrite = index
      this.headArr.forEach((iten) => {
        if (item === iten.innerHTML) {
          this.$refs.wrap.scrollTop = iten.offsetTop
        } if (item === iten) {
          this.$refs.wrap.scrollTop = iten.offsetTop
        }
      })
    },
    // 销毁定时器
    beforeDestroy() {
      clearInterval(this.timer)
      this.timer = null
    }

大致效果，希望能帮到小伙伴们！