vue-office：一站式Office文件预览解决方案

最新推荐文章于 2025-11-12 09:52:00 发布

转载最新推荐文章于 2025-11-12 09:52:00 发布 · 570 阅读

CC 4.0 BY-SA版权

原文链接：https://mp.weixin.qq.com/s?__biz=MzUzMTA2NTU2Ng==&mid=2247606350&idx=2&sn=1c88512d59cb63c20f857b05d1354dec&chksm=fbb5ed4c62a8d5fcf9d3f21b1a0a153ac51d037697bda01ba11e05526a7771faa52e26f8048b&scene=126&sessionid=0

文章标签：

#vue.js #前端 #javascript #ecmascript #前端框架

👉 这是一个或许对你有用的社群

🐱 一对一交流/面试小册/简历优化/求职解惑，欢迎加入「芋道快速开发平台」知识星球。下面是星球提供的部分资料：

《项目实战（视频）》：从书中学，往事上“练”
《互联网高频面试题》：面朝简历学习，春暖花开
《架构 x 系统设计》：摧枯拉朽，掌控面试高频场景题
《精进 Java 学习指南》：系统学习，互联网主流技术栈
《必读 Java 源码专栏》：知其然，知其所以然

👉这是一个或许对你有用的开源项目

国产 Star 破 10w+ 的开源项目，前端包括管理后台 + 微信小程序，后端支持单体和微服务架构。

功能涵盖 RBAC 权限、SaaS 多租户、数据权限、商城、支付、工作流、大屏报表、微信公众号、ERP、CRM、AI 大模型等等功能：

Boot 多模块架构：https://gitee.com/zhijiantianya/ruoyi-vue-pro
Cloud 微服务架构：https://gitee.com/zhijiantianya/yudao-cloud
视频教程：https://doc.iocoder.cn

【国内首批】支持 JDK 17/21 + SpringBoot 3.3、JDK 8/11 + Spring Boot 2.7 双版本

来源：江南一点雨

今天给小伙伴们介绍一个前端的办公文件浏览库。

一 vue-office

vue-office 是一个支持多种文件(docx、.xlsx、pdf)预览的 vue 组件库，支持 vue2 和 vue3。

vue-office 有三个特色：

一站式：提供 docx、.xlsx、pdf 多种文档的在线预览方案，有它就够了，不用再四处寻找、测试、集成各种库了
使用简单：只需提供文档的 src (网络地址)即可完成文档预览，也支持 ArrayBuffer、Blob 等多种格式
支持样式：不仅能预览内容，也支持文档样式，最大限度还原 office 文件内容

好啦，不废话，接下来我们就来看下这个开源组件该如何使用。

基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 用户小程序，支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能

项目地址：https://github.com/YunaiV/ruoyi-vue-pro
视频教程：https://doc.iocoder.cn/video/

二安装

首先我们需要在自己的前端项目中安装 vue-office：

#docx文档预览组件
npm install @vue-office/docx vue-demi

#excel文档预览组件
npm install @vue-office/excel vue-demi

#pdf文档预览组件
npm install @vue-office/pdf vue-demi

❝

特别提醒：如果是 vue2.6 或以下版本还需要额外安装 @vue/composition-apinpm install @vue/composition-api

安装好之后就可以使用啦～

基于 Spring Cloud Alibaba + Gateway + Nacos + RocketMQ + Vue & Element 实现的后台管理系统 + 用户小程序，支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能

项目地址：https://github.com/YunaiV/yudao-cloud
视频教程：https://doc.iocoder.cn/video/

三使用

3.1 预览 docx

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

<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

export default {
    components: {
        VueOfficeDocx
    },
    data() {
        return {
            docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址，可以是相对地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
}
</script>

可以看到，组件使用非常 easy，只需要提供 docx 文档的链接地址即可，上面案例中展示的是一个网络地址，当然这个位置也可以给一个相对地址。

在预览的时候我们可以设置组件的 style 配置样式，一般来说我们只需要设置下高度 height 即可，如果不设置则默认取组件的父元素高度，最小高度 300px。

组件渲染完成会抛出 rendered 事件，渲染失败会抛出 error 事件，方便我们在事件中做后续处理。

上面案例展示的是一个远程文件，有时候我们想要预览即将上传的文件，上传前预览主要是通过读取文件的 ArrayBuffer 格式，传给预览组件来实现。

松哥这里以 ElementUI 的上传组件作为示例，当然也可以使用普通的 input type="file"，只要能获取文件的 ArrayBuffer 格式数据即可。

我们来看下如何预览即将上传的文件：

<template>
    <div id="docx-demo">
        <el-upload
            :limit="1"
            :file-list="fileList"
            accept=".docx"
            :beforeUpload="beforeUpload"
            action=""
        >
            <el-button size="small" type="warning">点击上传</el-button>
        </el-upload>
        <vue-office-docx :src="src"/>
    </div>
</template>

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

export default {
    components: {
        VueOfficeDocx
    },
    data() {
        return {
            src: '',
            fileList: []
        }
    },
    methods: {
        //在beforeUpload中读取文件内容
        beforeUpload(file) {
            let reader = new FileReader();
            reader.readAsArrayBuffer(file);
            reader.onload = (loadEvent) => {
                let arrayBuffer = loadEvent.target.result;
                this.src = arrayBuffer
            };
            return false
        }
    }
}
</script>

上面的案例主要是利用在 beforeUpload 中获取上传的文件，然后利用 FileReader 以 ArrayBuffer 格式读取，读取之后传给预览组件。

如果是原生的 input 标签 type="file"，也是类似的：

<template>
    <div>
        <input type="file" @change="changeHandle"/>
        <vue-office-docx :src="src"/>
    </div>
</template>

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

export default {
    components: {
        VueOfficeDocx
    },
    data() {
        return {
            src: ''
        }
    },
    methods: {
        changeHandle(event) {
            let file = event.target.files[0]
            let fileReader = new FileReader()
            fileReader.readAsArrayBuffer(file)
            fileReader.onload = () => {
                this.src = fileReader.result
            }
        }
    }
}
</script>

3.2 预览 pdf

搞明白了 docx 的预览，那么 pdf 预览也差不多：

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

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

export default {
    components: {
        VueOfficePdf
    },
    data() {
        return {
            pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
}
</script>

3.3 预览 excel

同理，excel 预览也类似：

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

<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'

export default {
    components: {
        VueOfficeExcel
    },
    data() {
        return {
            options:{
                xls: false,       //预览xlsx文件设为false；预览xls文件设为true
                minColLength: 0,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
                minRowLength: 0,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
                widthOffset: 10,  //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
                heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
                beforeTransformData: (workbookData) => {return workbookData}, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
                transformData: (workbookData) => {return workbookData}, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
            },
            excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
}
</script>

❝

这块有个不足之处就是目前只支持 xlsx 文件预览，不支持 xls 文件。

四常见问题

预览传入的的文件地址不能跨域，跨域就预览不出来了～

这个问题我们可以通过 Nginx 配置去解决，通过 Nginx 使前后端处于同一域中：

具体配置如下：

server {  
    listen 80;  
    server_name example.com;  
  
    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {  
        root /data/static;  
        expires 30d; # 缓存静态文件30天  
    }  
  
    location / {  
        proxy_pass http://javaboy.org; # 假设后端应用服务器  
        proxy_set_header Host $host;  
        proxy_set_header X-Real-IP $remote_addr;  
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  
    }  
}

这样，前后端处于同一域中，就不存在跨域问题了。

项目地址：https://github.com/501351981/vue-office

感兴趣的小伙伴可以去试试～

欢迎加入我的知识星球，全面提升技术能力。

👉 加入方式，“长按”或“扫描”下方二维码噢：

星球的内容包括：项目实战、面试招聘、源码解析、学习路线。

文章有帮助的话，在看，转发吧。
谢谢支持哟 (*^__^*）

vue-office：一站式Office文件预览解决方案

一 vue-office

二 安装

三 使用

3.1 预览 docx

3.2 预览 pdf

3.3 预览 excel

四 常见问题

二安装

三使用

四常见问题