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

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

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

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

来源：江南一点雨

• 一 vue-office
• 二 安装
• 三 使用
• 3.1 预览 docx
• 3.2 预览 pdf
• 3.3 预览 excel
• 四 常见问题

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

一 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'exportdefault {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><divid="docx-demo"><el-upload:limit="1":file-list="fileList"accept=".docx":beforeUpload="beforeUpload"action=""        ><el-buttonsize="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'exportdefault {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            };returnfalse        }    }}</script>

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

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

<template><div><inputtype="file" @change="changeHandle"/><vue-office-docx:src="src"/></div></template><script>import VueOfficeDocx from'@vue-office/docx'import'@vue-office/docx/lib/index.css'exportdefault {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'exportdefault {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'exportdefault {components: {        VueOfficeExcel    },    data() {return {options:{xls: false,       //预览xlsx文件设为false；预览xls文件设为trueminColLength: 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

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