Vue2实现Office文档(docx、xlsx、pdf)在线预览功能

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

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, // 解决全屏报错
        },
    }
})

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

<script>
// 引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
// 引入相关样式
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', // 设置文档地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
};
</script>

<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'
// 引入相关样式
import '@vue-office/excel/lib/index.css'

export default {
    name: "VueOfficeExcelDemo",
    components: {
        VueOfficeExcel
    },
    data() {
        return {
            options: {
                xls: true, // 预览xlsx文件设为false；预览xls文件设为true
                minColLength: 10, // excel最少渲染多少列
                minRowLength: 10, // excel最少渲染多少行
                widthOffset: 10, // 单元格宽度偏移量
                heightOffset: 10, // 单元格高度偏移量
                beforeTransformData: (workbookData) => { return workbookData }, // 数据预处理
                transformData: (workbookData) => { return workbookData }, // 数据转换
            },
            excel: 'http://127.0.0.1:9000/senior-valve-hub/tutorials/example.xlsx', // 设置文档地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
};
</script>

<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', // 设置文档地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
};
</script>

<template>
    <div id="app">
        <h1>Vue2 Office文档预览</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>