Vue.js中的Word文件预览功能实现指南:使用Vue-Office插件轻松展示文档
word预览,实际在开发中,是个很常见的功能,无论是自己开发组件,还是借助开源组件等等,都可以,但是今天我分享一款借助vue-office来实现word预览
vue-office简介
vue-office是一个支持多种文件(docx、.xlsx、pdf)预览的vue组件库,支持vue2和vue3。
目标是成为使用最简单,功能最强大的文件预览库
vue-office功能特色
-
一站式:提供docx、.xlsx、pdf多种文档的在线预览方案,有它就够了,不用四处寻找、测试、集成各种库了
-
使用简单:只需提供文档的src(网络地址)即可完成文档预览,也支持ArrayBuffer、Blob等多种格式
-
支持样式:不仅能预览内容,也支持文档样式,最大限度还原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
docx文件预览
目前支持docx文件预览,不支持doc文件
使用网络地址预览
通过配置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>
可以设置组件的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>
xlsx文件预览
目前只支持xlsx文件预览,不支持xls文件。
使用网络地址预览
<template>
<vue-office-excel
:src="excel"
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 {
excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址
}
},
methods: {
renderedHandler() {
console.log("渲染完成")
},
errorHandler() {
console.log("渲染失败")
}
}
}
</script>
上传文件预览
和docx的上传文件预览一样,获取文件的ArrayBuffer,传给组件的src属性。
pdf文件预览
使用网络地址预览
<template>
<vue-office-pdf
:src="pdf"
@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>
上传文件预览
和docx的上传文件预览一样,获取文件的ArrayBuffer,传给组件的src属性。
我这里主要分享以VUE为基础的样例,如果你不是该框架,可参考官方文档
空空如也!