需求
- vue项目内做一个导入ppt的功能
- 导入的ppt在项目内点击可以预览并且直接在线编辑。
- 可以多人协同编辑
- 编辑后可保存
- 内网
寻找实现方案
-
使用
iframe
:将PPT文件嵌入到一个iframe中进行预览。(pass掉的原因:可以预览,不能编辑,内网使用要考虑的安全性问题太多) -
vue-ppt-preview
:一个用于在Vue项目中预览PPT文件的插件,支持在线预览PPT文件,并提供缩略图和全屏预览功能。(pass掉的原因:不支持协同编辑) -
kkfileview
: 一个强大的在线文件预览和编辑控件,可以支持内网使用,同时也支持多人协同编辑。(pass掉的原因:需要后端部署,但他太忙了,没时间) -
微软的
Office Online
插件来实现,可在线预览也支持多人协同编辑,也无需安装,自动保存,这样看是很符合领导的需求了,但是他的文件有暴露风险(公司文件密级特别高,我可不想吃免费饭) -
onlyOffice
: 可以实现在线预览和编辑多种文档格式。支持内网部署,并且可以实现多人协同编辑。他提供了免费的开源版本和付费的企业版,企业版包含更多高级功能和技术支持。免费版多人协同编辑通常只支持2-10人,想要支持更多人协同编辑就要使用付费的企业版。公司不愿意付费,但领导说10人足够了,所以最终决定使用onlyOffice
。
功能实现
后端部署:
onlyOffice也是需要后端部署的,但是听说简单部署一下就好,具体我不清楚,我不会后端 (可以官网看教程:https://www.onlyoffice.com/zh/developer-edition.aspx
)
前端步骤:
1. 安装OnlyOffice
npm install onlyoffice-document
2. 新建一个组件放onlyOffice(下面是组件的完整代码,可直接复制去使用
)
<template>
<div id='vabOnlyOffice'></div>
</template>
<script>
export default {
name: 'VabOnlyOffice',
props: {
option: {
type: Object,
default: () => {
return {}
},
},
},
data() {
return {
doctype: '',
docEditor: null,
}
},
beforeDestroy() {
if (this.docEditor !== null) {
this.docEditor.destroyEditor();
this.docEditor = null;
}
},
watch: {
option: {
handler: function(n) {
this.setEditor(n)
this.doctype = this.getFileType(n.fileType)
},
deep: true,
},
},
mounted() {
if (this.option.url) {
this.setEditor(this.option)
}
},
methods: {
async setEditor(option) {
if (this.docEditor !== null) {
this.docEditor.destroyEditor();
this.docEditor = null;
}
this.doctype = this.getFileType(option.fileType)
let config = {
document: {
//后缀
fileType: option.fileType,
key: option.key ||'',
title: option.title,
permissions: {
edit: option.isEdit,//是否可以编辑: 只能查看,传false
print: option.isPrint,
download: false,
// "fillForms": true,//是否可以填写表格,如果将mode参数设置为edit,则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。
// "review": true //跟踪变化
},
url: option.url,
},
documentType: this.doctype,
editorConfig: {
callbackUrl: option.editUrl,//"编辑word后保存时回调的地址,这个api需要自己写了,将编辑后的文件通过这个api保存到自己想要的位置
lang: option.lang,//语言设置
//定制
customization: {
autosave: false,//是否自动保存
chat: false,
comments: false,
help: false,
// "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false
//是否显示插件
plugins: false,
},
user:{
id:option.user.id,
name:option.user.name
},
mode:option.model?option.model:'edit',
},
width: '100%',
height: '100%',
token:option.token||''
}
// eslint-disable-next-line no-undef,no-unused-vars
this.docEditor = new DocsAPI.DocEditor('vabOnlyOffice', config)
},
getFileType(fileType) {
let docType = ''
let fileTypesDoc = [
'doc', 'docm', 'docx', 'dot', 'dotm', 'dotx', 'epub', 'fodt', 'htm', 'html', 'mht', 'odt', 'ott', 'pdf', 'rtf', 'txt', 'djvu', 'xps',
]
let fileTypesCsv = [
'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx',
]
let fileTypesPPt = [
'fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx',
]
if (fileTypesDoc.includes(fileType)) {
docType = 'text'
}
if (fileTypesCsv.includes(fileType)) {
docType = 'spreadsheet'
}
if (fileTypesPPt.includes(fileType)) {
docType = 'presentation'
}
return docType
}
},
}
</script>
3. 在要使用onlyOffice的页面要做的事:
- 导入并注册刚刚写好的组件
- 用标签的形式使用组件
- 写一个触发打开onlyOffice的事件
- 事件里面放打开文件需要的配置,例如文件路径,支持的格式等...
(文件不用上传到服务器,我是放到本地的,文件路径写本地的就好,避免文件泄露)
下面是使用onlyOffice页面的完整代码
(可直接复制,改一下组件名
和文件路径this.option.url的值
即可使用)
<template>
<div id="app">
<div class='qualityManual-container'>
<div>
/*写一个触发打开onlyOffice的事件*/
<button style='width: 120px;' type='primary' @click='getFile'>测试预览onlyOffice文档</button>
<button style='width: 120px;' type='primary' @click='close'>关闭</button>
</div>
<div v-if='show' class='qualityManual-container-office'>
/*用标签的形式使用组件*/
<vab-only-office :option='option' />
</div>
</div>
</div>
</template>
<script>
import vabOnlyOffice from './components/组件名' //导入刚刚写好的组件
export default {
name: 'App',
components: {
vabOnlyOffice //注册导入的组件
},
data() {
return {
//参考vabOnlyOffice组件参数配置
option: {
url: '',
isEdit: '',
fileType: '',
title: '',
lang: '',
isPrint: '',
user: { id:null,name:''}
},
show: false,
}
},
methods: {
//事件里面放打开文件需要的配置,例如文件路径,支持的格式等...
getFile() {
this.show = true
// getAction('/file/selectById', { id: this.id }).then(res => {
this.option.isEdit = false
this.option.lang = 'zh-CN'
this.option.url = '你的文件路径'
this.option.title = '这是个文档标题而已'
this.option.fileType = 'pptx'
this.option.isPrint = false
this.option.user= { id:12,name:'张三'}
// })
},
close() {
this.show = false
},
},
}
</script>
<style>
html,body{
height:100%;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
height:100%;
}
.qualityManual-container {
padding: 0 !important;
height:100%;
}
.qualityManual-container-office {
width: 100%;
height: calc(100% - 55px);
}
</style>
看效果
点击测试预览office文档打开ppt预览 点击关闭就隐藏
加载成功后的ppt,可以预览,播放幻灯片,编辑等...
如果有写的不明白的地方:请看官网实现onlyoffice官网