Vue 展示word\excel\pdf 内容

Vue 展示word\excel\pdf 内容

1、前言

• 项目使用的是若依框架，有一个审核的功能，审核弹窗中需要显示出上传的文件内容，而没有原生的组件可以实现该功能。

2、遇到的问题

1. 使用 iframe 组件、不报错，但最后实现的效果是下载而不是展示出来

2. 项目是vue2的版本使用@vue-office，直接报错，解决办法放后面

3、解决方法

• 最终还是使用的@vue-office，解决办法是vue2需要再引入一个依赖"@vue/composition-api"

4、完整代码

1、 在package.json中添加依赖

"@vue-office/docx": "^1.6.2",
"@vue-office/excel": "^1.7.11",
"@vue-office/pdf": "^2.0.7",
"@vue/composition-api": "^1.7.2",

2、 在main.js中定义组件

//引入相关模块
import VueOfficeDocx from '@vue-office/docx/lib'
import VueOfficeExcel from '@vue-office/excel/lib'
import VueOfficePdf from '@vue-office/pdf/lib'
//引入相关样式
import '@vue-office/docx/lib/v2/index.css'

3、 最后在界面中使用就行了

 <el-form-item label="相关证书证明复印件">
    <div  v-if="getFileType( form.fileUrl) == 'docx' || getFileType( form.fileUrl) == 'doc'">
     <VueOfficeDocx style="width:100% ;height: 500px;" :src=" form.fileUrl" />
    </div>
   <div v-if="getFileType( form.fileUrl) == 'excel' || getFileType( form.fileUrl) == 'xlsx' || getFileType( form.fileUrl) == 'xls'">
     <VueOfficeExcel style="width:100% ;height: 500px;" :src=" form.fileUrl" />
   </div>
   <div v-if="getFileType( form.fileUrl) == 'pdf'">
     <VueOfficePdf style="width:100% ;height: 500px;" :src=" form.fileUrl" />
   </div>
 </el-form-item>

4、这里有个判断文件类型的方法getFileType，在vue的method中定义一下即可

getFileType(file) {
      const fileName = file.split('.');
      const fileExt = fileName[fileName.length - 1];
      return fileExt
    }