今天给小伙伴们介绍一个前端的办公文件浏览库。
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-api
npm 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
