vue-office实现docx xlsx pdf预览

vue-office实现docx xlsx pdf预览,不能实现doc和xls，这两种格式需要后端将其转化成docx xlsx

依赖插件

"@vue-office/docx": "^1.6.3",
"@vue-office/excel": "^1.7.14",
"@vue-office/pdf": "^2.0.10",
"@vue/composition-api": "^1.7.2",
"vue-demi": "^0.14.10",

<template> 
<div class="office-box" v-if="['docx'].includes(this.type)">
    <div class="item">{{ viewUrl }}</div>
    <vue-office-docx
      style="height: 100vh; overflow: auto"
      :src="viewUrl"
      @rendered="rendered"
    />
  </div>
  <div class="office-box" v-else-if="['xlsx'].includes(this.type)">
    <div class="item">excel{{ viewUrl }}</div>
    <vue-office-excel
      style="height: 100vh; overflow: auto"
      :src="viewUrl"
      @rendered="rendered"
    />
  </div>
  <div class="office-box" v-if="this.type === 'pdf'">
    <div class="item">pdf{{ viewUrl }}</div>
    <vue-office-pdf
      style="height: 100vh; overflow: auto"
      :src="viewUrl"
      @rendered="rendered"
    />
  </div>
</template>
<script>
// 引入相关样式
import '@vue-office/docx/lib/index.css'
import '@vue-office/excel/lib/index.css'

// 引入VueOffice组件 目前vue-office不支持doc格式
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'
export default {
  name: "ViewFile",
  components: {VueOfficeDocx,VueOfficeExcel,VueOfficePdf },
  data() {
    return {
      viewUrl:''
    };
  },
}
</script>