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-apidocx文件预览
目前支持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为基础的样例，如果你不是该框架，可参考官方文档
空空如也！