vue docx文件预览复杂文件格式无法正确显示一、前言 vue项目用使用docx-preview插件预览docx格式文

一、前言

vue项目用使用docx-preview插件预览docx格式文件，简单的docx文件可以预览，但发现上传了合同类型格式的文件后无法正常打开文件预览，打开空白控制台输出了错误：

docx-preview在解析文件中复杂的格式中无法正确解析出来。

二、解决

更改为使用vue-office实现docx预览，vue-office支持docx、pptx和xlsx格式的文件预览，相对比docx-preview，vue-office兼容性较好，适用于需要较高格式保留、支持多种 Office 格式的应用场景，特别是需要复杂文档结构和格式的预览。

安装：
因为只需要docx文件的预览，只是安装了vue-office的docx
npm install @vue-office/docx
npm install @vue/composition-api
npm install vue-demi
注意：vue2一定要安装@vue/composition-api，因为vue-office是基于vue3是基于 Vue 3 的 Composition API 开发的，而 Vue 2 默认不支持 Composition API，如果不安装，在引入时，会报错。vue-demi适配 Vue2/3 的兼容层，不安装打包上线后会报错，所以一定要安装
main.js引入
import VueCompositionAPI from '@vue/composition-api
Vue.use(VueCompositionAPI)
使用

<template>
  <div>
    <vue-office-docx 
      :src="docxData" 
      style="height: 100vh;"
      :loading="isLoading"
      @rendered="isLoading = false" >
    </vue-office-docx>
  </div>
</template>
<script>
// 引入
import vueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'

export default {
    components: { vueOfficeDocx },
    mounted() {
         this.downloadFile()
    },
    methods: {
        downloadFile() {
            request({
                  method: 'get',
                  params: {
                     // 参数
                  },
                  url: '',  // 下载文件接口
                  responseType: 'blob',
                  timeout: 0
                }).then(res => {
                // vue-office支持直接渲染blob格式
                  this.docxData = res.data
                }).catch((error) => {})
        },
  }
}
</script>

vue docx文件预览复杂文件格式无法正确显示

一、前言

二、 解决

二、解决