Vue在线预览Excel和Docx格式文件实现方式
作者：过路云野
Vue-Office是一个适用于Vue2和Vue3的Office文件格式在线预览插件,支持Word、Excel、PDF和PowerPoint等多种文件格式,它提供了简单集成、良好用户体验和性能优化等功能,适用于非Vue框架
前提：本次示例基于Vue2.x，所用插件为Vue-Office。
一、Vue-Office 插件简介
Vue-Office 是一个一站式解决方案，支持多种 Office 文件格式的在线预览，包括：
Word（.docx）Excel（.xlsx、.xls）PDFPowerPoint（.pptx）
它适用于 Vue 2 和 Vue 3，同时兼容非 Vue 框架（如 React），为开发者提供了简单、高效的文档预览功能。
二、功能特点
1. 简单集成：
无需为不同文件类型寻找多个库，Vue-Office 提供了统一的预览功能，只需提供文档的 URL（网络地址）即可完成预览，降低开发成本。
2. 良好的用户体验：
针对每种文件类型选择了最佳的预览方案，确保加载速度、渲染效果和交互操作流畅。
3. 性能优化：
针对数据量较大的文档进行了优化，确保在高负载情况下也能保持稳定的预览效果。
4. 支持多种文件格式：
除了常见的 Word、Excel 和 PDF，还支持 PowerPoint 文件。
三、应用示例
1.安装Vue-Office相关组件
npm install @vue-office/excel npm install @vue-office/docx
2.vue使用
以下以Excel和Word格式文件为例：
<template>
<div ref="officeViewerRef" v-if="officeDialog" class="officeDemo">
<vue-office-excel
v-if="xlsxDialog"
:src="url"
style="height: 100vh;"
@rendered="renderedHandler"
@error="errorHandler"
/>
<vue-office-docx
v-if="docxDialog"
:src="url"
style="height: 100vh;"
@rendered="renderedHandler"
@error="errorHandler"
/>
</div>
</template>
<script>
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
export default {
name: "office-viewer",
components: {
VueOfficeExcel,VueOfficeDocx,
},
data(){
return {
officeLoading: '',
xlsxDialog:false,
docxDialog:false,
url:'',
fjType:'',
isEnd:false,
officeDialog:true,
}
},
watch: {
isEnd() {
this.officeDialog = false;
this.$nextTick(()=>{
this.officeDialog = true;
})
},
},
mounted(){
this.loadFile();
},
methods: {
loadFile(){
const url ='实际文件地址';
if(url.indexOf(".doc") > -1){
this.fjType = 'word';
}else{
this.fjType = 'excel';
}
this.url = url;
this.officeLoading = this.$loading({
lock: true,
target:this.$refs.officeViewerRef.$el,
text: '正在加载，请稍后....',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
if(this.fjType == 'excel'){
this.xlsxDialog = true;
}else if(this.fjType == 'word'){
this.docxDialog = true;
}
},
renderedHandler() {
// this.$message.success("渲染完成！");
this.officeLoading && this.officeLoading.close();
if(this.fjType == 'excel'){
this.isEnd = true;
}
},
errorHandler() {
this.$message.error("渲染失败！");
this.officeLoading && this.officeLoading.close();
},
}
}
</script>
<style lang="scss">
.officeDemo{
background-color: #808080;
height: 100%;
padding: 30px 0;
.vue-office-docx,.vue-office-excel{
height: calc(100% - 60px)!important;
}
.vue-office-excel{
width: calc(100% - 60px);
margin-left: 30px;
}
.docx-wrapper{
padding-top: 0!important;
padding-bottom: 0!important;
}
.docx{
border-radius: 3px;
}
.docx:last-child{
margin-bottom: 0!important;
}
.x-spreadsheet{
padding-top: 5px;
box-sizing: border-box;
border-radius: 5px;
}
}
</style>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。