vue实现 传入不同的文件实现不同的 word pdf excel 在线预览

公司要做一个文件上传后 回显直接是预览的一个效果 找了半天看见了一个vue插件
 

vue-office

实现了 word pdf excel的在线预览 话不多数直接上代码
 

//docx文档预览组件
npm install @vue-office/docx

//excel文档预览组件
npm install @vue-office/excel

//pdf文档预览组件
npm install @vue-office/pdf

如果是vue2.6版本或以下还需要额外安装 @vue/composition-api
在你的项目package.js里面查看
像我的项目就是 "vue": "2.6.10",
 

npm install @vue/composition-api

然后我们现在开始做代码的一个处理

<template>
  <div>
    <wd-dialog
      :title="title"
      width="70%"
      :visible="show"
      :append-to-body="appendToBody"
      :modal="modal"
      :loading="submitting"
      ok-button-text="确 定"
      cancel-button-text="取 消"
      @confirm="onConfirm()"
      @cancel="onCancelEvent()"
    >
      <template #content>
        <el-form ref="ruleForm" size="mini" :model="ruleForm" label-width="100px" :disabled="optType === 'view'">
          <el-row>
            <el-col :span="10">
              <div style="width: 600px; overflow-x: auto;max-height: 500px; overflow-y: auto;">
                <Office :office="Office" />
              </div>
            </el-col>
     
          </el-row>
        </el-form>
      </template>
    </wd-dialog>
  </div>
</template>

<script>
import WdDialog from '@/components/WdDialog/WdDialog'
import CustomDialogMixin from '@/mixin/CustomDialogMixin'
import { cloneDeep } from 'lodash'
import comMixin from '@/mixin/comMixin'
import { reqModify, reqreviewsave, reqdetails } from '../api/index'
import Office from '@/components/Office'
// 引入相关样式'
export default {
  name: 'SelectFormDialog',
  components: { WdDialog, Office },
  mixins: [CustomDialogMixin, comMixin],
  props: {
    mForm: {
      required: true,
      type: Object
    }
  },
  data() {
    return {
      ruleForm: {
      },
      Office: '',
      docx: ''
  },
  watch: {
    show(val) {
      if (val) {
        this.ruleForm = cloneDeep(this.mForm)
        console.log(this.ruleForm)
        this.getdetails()
        if (this.$refs['ruleForm']) {
          setTimeout(() => {
            this.$refs['ruleForm'].clearValidate()
          }, 20)
        }
      }
    }
  },
  created() {
    this.initSelection()
  },
  methods: {
    getdetails() {
      const code = this.ruleForm.subjectInformationResponse.code
      const approveStatus = 1
      reqdetails({ code: code, approveStatus: approveStatus }).then(res => {
        console.log(res)
            // 获取的文件地址
        const Office  = res.data.createMaterials[0].filePath
            // 拼上你们的线上环境或者是测试环境的端口和ip
        this.Office = 'http://192.168.0.103:8888/' + Office 
        console.log(this.docx)
      })
    },
     // 这里是文件回显成功的回调
    renderedHandler() {
      console.log('渲染完成')
    },
     // 文件回显失败的回调
    errorHandler() {
      console.log('渲染失败')
    }
</script>

    <style scoped lang="scss">
    </style>

通过传值 把你的网络地址传入 office组件
现在我们看封装的office组件
 

<template>
  <div class="myDiv">
    <component :is="getComponentType(office)" :src="office" @rendered="renderedHandler" @error="errorHandler" />
  </div>
</template>

<script>
// import '@vue-office/excel/lib/index.css'

import VueOfficeDocx from '@vue-office/docx'
import VueOfficePdf from '@vue-office/pdf'
import VueOfficeExcel from '@vue-office/excel'
export default {
  name: '',
  components: {
    VueOfficeDocx,
    VueOfficePdf,
    VueOfficeExcel
  },
  props: {
    office: {
      type: String,
      required: true,
      default: 'default value'
    }
  },
  methods: {
    getComponentType(file) {
      const extension = file.substring(file.lastIndexOf('.') + 1)
      switch (extension) {
        case 'docx':
          return 'VueOfficeDocx'
        case 'pdf':
          return 'VueOfficePdf'
        case 'xlsx':
          return 'VueOfficeExcel'
        default:
          return 'div' // 默认返回一个占位的 div 组件
      }
    },
    renderedHandler() {
      console.log('渲染完成')
    },
    errorHandler() {
      console.log('渲染失败')
    }
  }
}
</script>

  <style lang="scss" scoped>
  /* 样式 */
  </style>

这里我并没有引用他的css样式组件库 因为我不太需要 我自己写了一点 如果你需要的话也要引入

 

//引入相关样式
import '@vue-office/excel/lib/index.css'

//引入相关样式
import '@vue-office/docx/lib/index.css'

我去官网查了一下pdf没有相关样式

最后是通过传入文件不同的后缀名 做的判断 渲染哪个文件。

代码不可以复制粘贴  以为项目里封装了 一些自定义的elenemt-ui 插件

最后是感谢作者掘金：这可能是最简单的docx、pdf、excel文件预览vue组件库 - 掘金 (juejin.cn)

vue-office官网: vue-office简介 | vue-office

gethup源码:GitHub - 501351981/vue-office: 支持word(.docx)、excel(.xlsx)、pdf等各类型office文件预览的vue组件集合，提供一站式office文件预览方案，支持vue2和3，也支持React等非Vue框架。Web-based pdf, excel, word preview library