vue2/3 中使用 @vue-office/docx 在网页中预览(docx、excel、pdf)文件

1. 安装依赖：

	#docx文档预览组件
	npm install @vue-office/docx vue-demi@0.14.6
	#excel文档预览组件
	npm install @vue-office/excel vue-demi@0.14.6
	#pdf文档预览组件
	npm install @vue-office/pdf vue-demi@0.14.6

vue2.6版本或以下还需要额外安装 @vue/composition-api

npm install @vue/composition-api

vue2中在components文件中写个组件

<template>
    <div>
        <vue-office-docx v-if="type == 'docx'" :src="`${matchType(src)}`" @rendered="rendered" />
        <vue-office-excel v-if="type == 'excel'" :src="`${matchType(src)}`" @rendered="rendered" />
        <vue-office-pdf v-if="type == 'pdf'" :src="`${matchType(src)}`" @rendered="rendered" />
    </div>

</template>

<script>
import VueOfficeDocx from '@vue-office/docx';
import VueOfficeExcel from '@vue-office/excel';
import VueOfficePdf from '@vue-office/pdf';
export default {
    components: {
        VueOfficeDocx,
        VueOfficeExcel,
        VueOfficePdf
    },
    props: {
        src: {
            type: String,
            required: true
        },
    },
    data() {
        return {
            type: docx
        }
    },
    methods: {
        matchType(fileName) {
      // 后缀获取
      var suffix = ''
      // 获取类型结果
      var result = ''
      try {
        var flieArr = fileName.split('.')
        suffix = flieArr[flieArr.length - 1]
      } catch (err) {
        suffix = ''
      } 

        }
    }

}
</script>

<style></style>

 等数据接入再继续更新