Vue在线预览Excel和Docx格式文件实现方式

 npm install @vue-office/excel
 npm install @vue-office/docx

<template>
    <div ref="officeViewerRef" v-if="officeDialog" class="officeDemo">
        <vue-office-excel
            v-if="xlsxDialog"
            :src="url"
            style="height: 100vh;"
            @rendered="renderedHandler"
            @error="errorHandler"
        />
        <vue-office-docx
            v-if="docxDialog"
            :src="url"
            style="height: 100vh;"
            @rendered="renderedHandler"
            @error="errorHandler"
        />
    </div>
</template>

<script>
    import VueOfficeExcel from '@vue-office/excel'
    import '@vue-office/excel/lib/index.css'
    import VueOfficeDocx from '@vue-office/docx'
    import '@vue-office/docx/lib/index.css'

    export default {
        name: "office-viewer",
        components: {
          VueOfficeExcel,VueOfficeDocx,
        },
        data(){
            return {
                officeLoading: '',
                xlsxDialog:false,
                docxDialog:false,
                url:'',
                fjType:'',
                isEnd:false,
                officeDialog:true,
            }
        },
        watch: {
            isEnd() {
                this.officeDialog = false;
                this.$nextTick(()=>{
                    this.officeDialog = true;
                })
            },
        },
        mounted(){
            this.loadFile();
        },
        methods: {
            loadFile(){
                const url ='实际文件地址';
                if(url.indexOf(".doc") > -1){
                    this.fjType = 'word';
                }else{
                    this.fjType = 'excel';
                }
                this.url = url;
                this.officeLoading = this.$loading({
                    lock: true,
                    target:this.$refs.officeViewerRef.$el,
                    text: '正在加载，请稍后....',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                if(this.fjType == 'excel'){
                    this.xlsxDialog = true;
                }else if(this.fjType == 'word'){
                    this.docxDialog = true;
                }

            },
            renderedHandler() {
                // this.$message.success("渲染完成！");
                this.officeLoading && this.officeLoading.close();
                if(this.fjType == 'excel'){
                    this.isEnd = true;
                }
            },
            errorHandler() {
                this.$message.error("渲染失败！");
                this.officeLoading && this.officeLoading.close();
            },
        }
    }
</script>

<style lang="scss">
.officeDemo{
  background-color: #808080;
  height: 100%;
  padding: 30px 0;
  .vue-office-docx,.vue-office-excel{
    height: calc(100% - 60px)!important;
  }
  .vue-office-excel{
    width: calc(100% - 60px);
    margin-left: 30px;
  }
  .docx-wrapper{
    padding-top: 0!important;
    padding-bottom: 0!important;
  }
  .docx{
    border-radius: 3px;
  }
  .docx:last-child{
    margin-bottom: 0!important;
  }
  .x-spreadsheet{
    padding-top: 5px;
    box-sizing: border-box;
    border-radius: 5px;
  }
}
</style>