快捷導(dǎo)航

Vue在線預(yù)覽Excel和Docx格式文件實現(xiàn)方式

更新時間：2025年12月17日 09:49:19 作者：過路云野

Vue-Office是一個適用于Vue2和Vue3的Office文件格式在線預(yù)覽插件,支持Word、Excel、PDF和PowerPoint等多種文件格式,它提供了簡單集成、良好用戶體驗和性能優(yōu)化等功能,適用于非Vue框架

一、Vue-Office 插件簡介

Vue-Office 是一個一站式解決方案，支持多種 Office 文件格式的在線預(yù)覽，包括：

Word（.docx）
Excel（.xlsx、.xls）
PDF
PowerPoint（.pptx）

它適用于 Vue 2 和 Vue 3，同時兼容非 Vue 框架（如 React），為開發(fā)者提供了簡單、高效的文檔預(yù)覽功能。

二、功能特點

1. 簡單集成：

無需為不同文件類型尋找多個庫，Vue-Office 提供了統(tǒng)一的預(yù)覽功能，只需提供文檔的 URL（網(wǎng)絡(luò)地址）即可完成預(yù)覽，降低開發(fā)成本。

2. 良好的用戶體驗：

針對每種文件類型選擇了最佳的預(yù)覽方案，確保加載速度、渲染效果和交互操作流暢。

3. 性能優(yōu)化：

針對數(shù)據(jù)量較大的文檔進行了優(yōu)化，確保在高負載情況下也能保持穩(wěn)定的預(yù)覽效果。

4. 支持多種文件格式：

除了常見的 Word、Excel 和 PDF，還支持 PowerPoint 文件。

三、應(yīng)用示例

1.安裝Vue-Office相關(guān)組件

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

2.vue使用

以下以Excel和Word格式文件為例：

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