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

琉璃℡初雪2025-05-14 15:00

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

javascript 复制代码

npm install @vue/composition-api

vue2中在components文件中写个组件

html 复制代码

<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>

等数据接入再继续更新