今天给小伙伴们介绍一个前端的办公文件浏览库。
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/
<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>
搞明白了 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>
同理，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
感兴趣的小伙伴可以去试试～
