快捷導(dǎo)航

Vue2實現(xiàn)Office文檔(docx、xlsx、pdf)在線預(yù)覽功能

更新時間：2025年05月27日 09:57:28 作者：洛可可白

在現(xiàn)代的Web應(yīng)用開發(fā)中,實現(xiàn)Office文檔（如docx、xlsx、pdf）的在線預(yù)覽功能是一個常見的需求,下面小編就來和大家詳細介紹一下如何使用vue2實現(xiàn)這一功能吧

在現(xiàn)代的Web應(yīng)用開發(fā)中，實現(xiàn)Office文檔（如docx、xlsx、pdf）的在線預(yù)覽功能是一個常見的需求。這不僅可以提升用戶體驗，還能使文檔的共享和協(xié)作更加便捷。本文將介紹如何在Vue2項目中使用@vue-office/docx、@vue-office/excel和@vue-office/pdf這三個庫來實現(xiàn)docx、xlsx和pdf文件的在線預(yù)覽。

@vue-office/docx、@vue-office/excel和@vue-office/pdf的官方文檔及相關(guān)資源如下：

GitHub主頁：https://github.com/501351981/vue-office ，這是該組件庫的官方GitHub倉庫，你可以在這里查看項目的源代碼、提交問題、參與貢獻等。

GitHub Pages文檔：提供了詳細的使用指南和示例，包括如何安裝、如何使用網(wǎng)絡(luò)地址預(yù)覽、如何設(shè)置組件的樣式等。

npm頁面：https://www.npmjs.com/package/@vue-office/pdf ，在npm頁面中可以查看各個包的版本信息、安裝命令、依賴關(guān)系等。

項目背景

在許多業(yè)務(wù)場景中，用戶需要在Web頁面上直接查看和操作Office文檔，而無需下載到本地再打開。例如，在企業(yè)內(nèi)部的文檔管理系統(tǒng)、在線教育平臺、項目協(xié)作工具等場景中，這種需求尤為常見。通過在前端實現(xiàn)文檔的在線預(yù)覽，可以減少用戶操作步驟，提高工作效率，同時也能更好地保護文檔的安全性，避免文檔在傳輸過程中被篡改或泄露。

技術(shù)選型

為了實現(xiàn)這一功能，我們選擇了@vue-office/docx、@vue-office/excel和@vue-office/pdf這三個庫。它們都是基于Vue.js的開源庫，專門用于在Vue項目中實現(xiàn)Office文檔的在線預(yù)覽。這些庫封裝了底層的文檔解析和渲染邏輯，提供了簡潔易用的API，能夠方便地與Vue項目集成。

實現(xiàn)步驟

1. 安裝依賴

在項目根目錄下運行以下命令，安裝所需的庫：

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

2. 配置Vue項目

在vue.config.js文件中配置代理，以便在開發(fā)環(huán)境中能夠正確訪問后端接口。例如：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:9090',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        client: {
            overlay: false, // 解決全屏報錯
        },
    }
})

3. 實現(xiàn)docx文件預(yù)覽

在src/components/VueOfficeDocxDemo.vue文件中，實現(xiàn)docx文件的預(yù)覽功能：

<template>
    <div>
        <vue-office-docx :src="docx" style="height: 100vh;" @rendered="renderedHandler" @error="errorHandler" />
    </div>
</template>

<script>
// 引入VueOfficeDocx組件
import VueOfficeDocx from '@vue-office/docx'
// 引入相關(guān)樣式
import '@vue-office/docx/lib/index.css'

export default {
    name: "VueOfficeDocxDemo",
    components: {
        VueOfficeDocx
    },
    data() {
        return {
            docx: 'http://127.0.0.1:9000/senior-valve-hub/tutorials/%E6%B5%8B%E8%AF%953.0.docx', // 設(shè)置文檔地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失敗")
        }
    }
};
</script>

4. 實現(xiàn)xlsx文件預(yù)覽

在src/components/VueOfficeExcelDemo.vue文件中，實現(xiàn)xlsx文件的預(yù)覽功能：

<template>
    <div>
        <vue-office-excel :src="excel" :options="options" style="height: 100vh;" @rendered="renderedHandler"
            @error="errorHandler" />
    </div>
</template>

<script>
// 引入VueOfficeExcel組件
import VueOfficeExcel from '@vue-office/excel'
// 引入相關(guān)樣式
import '@vue-office/excel/lib/index.css'

export default {
    name: "VueOfficeExcelDemo",
    components: {
        VueOfficeExcel
    },
    data() {
        return {
            options: {
                xls: true, // 預(yù)覽xlsx文件設(shè)為false；預(yù)覽xls文件設(shè)為true
                minColLength: 10, // excel最少渲染多少列
                minRowLength: 10, // excel最少渲染多少行
                widthOffset: 10, // 單元格寬度偏移量
                heightOffset: 10, // 單元格高度偏移量
                beforeTransformData: (workbookData) => { return workbookData }, // 數(shù)據(jù)預(yù)處理
                transformData: (workbookData) => { return workbookData }, // 數(shù)據(jù)轉(zhuǎn)換
            },
            excel: 'http://127.0.0.1:9000/senior-valve-hub/tutorials/example.xlsx', // 設(shè)置文檔地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失敗")
        }
    }
};
</script>

5. 實現(xiàn)pdf文件預(yù)覽

在src/components/VueOfficePdfDemo.vue文件中，實現(xiàn)pdf文件的預(yù)覽功能：

<template>
    <vue-office-pdf :src="pdf" @rendered="renderedHandler" @error="errorHandler" />
</template>

<script>
// 引入VueOfficePdf組件
import VueOfficePdf from '@vue-office/pdf'

export default {
    name: "VueOfficePdfDemo",
    components: {
        VueOfficePdf
    },
    data() {
        return {
            pdf: 'http://127.0.0.1:9000/senior-valve-hub/tutorials/example.pdf', // 設(shè)置文檔地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失敗")
        }
    }
};
</script>

6. 在主頁面中引入組件

在src/App.vue文件中，引入上述三個組件，并在頁面中展示：

<template>
    <div id="app">
        <h1>Vue2 Office文檔預(yù)覽</h1>
        <vue-office-docx-demo />
        <vue-office-excel-demo />
        <vue-office-pdf-demo />
    </div>
</template>

<script>
import VueOfficeDocxDemo from './components/VueOfficeDocxDemo.vue'
import VueOfficeExcelDemo from './components/VueOfficeExcelDemo.vue'
import VueOfficePdfDemo from './components/VueOfficePdfDemo.vue'

export default {
    name: 'App',
    components: {
        VueOfficeDocxDemo,
        VueOfficeExcelDemo,
        VueOfficePdfDemo
    }
}
</script>

<style>
#app {
    text-align: center;
    margin-top: 60px;
}
</style>