需求
- 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
1npm install onlyoffice-document
- 新建一个组件放onlyOffice(
下面是组件的完整代码，可直接复制去使用)
1<template>
2 <div id='vabOnlyOffice'></div>
3</template>
4
5<script>
6 export default {
7 name: 'VabOnlyOffice',
8 props: {
9 option: {
10 type: Object,
11 default: () => {
12 return {}
13 },
14 },
15 },
16 data() {
17 return {
18 doctype: '',
19 docEditor: null,
20 }
21 },
22 beforeDestroy() {
23 if (this.docEditor !== null) {
24 this.docEditor.destroyEditor();
25 this.docEditor = null;
26 }
27 },
28 watch: {
29 option: {
30 handler: function(n) {
31 this.setEditor(n)
32 this.doctype = this.getFileType(n.fileType)
33 },
34 deep: true,
35 },
36 },
37 mounted() {
38 if (this.option.url) {
39 this.setEditor(this.option)
40 }
41 },
42 methods: {
43 async setEditor(option) {
44 if (this.docEditor !== null) {
45 this.docEditor.destroyEditor();
46 this.docEditor = null;
47 }
48 this.doctype = this.getFileType(option.fileType)
49 let config = {
50 document: {
51 //后缀
52 fileType: option.fileType,
53 key: option.key ||'',
54 title: option.title,
55 permissions: {
56 edit: option.isEdit,//是否可以编辑: 只能查看，传false
57 print: option.isPrint,
58 download: false,
59 // "fillForms": true,//是否可以填写表格，如果将mode参数设置为edit，则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。
60 // "review": true //跟踪变化
61 },
62 url: option.url,
63 },
64 documentType: this.doctype,
65 editorConfig: {
66 callbackUrl: option.editUrl,//"编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置
67 lang: option.lang,//语言设置
68 //定制
69 customization: {
70 autosave: false,//是否自动保存
71 chat: false,
72 comments: false,
73 help: false,
74 // "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false
75 //是否显示插件
76 plugins: false,
77 },
78 user:{
79 id:option.user.id,
80 name:option.user.name
81 },
82 mode:option.model?option.model:'edit',
83 },
84 width: '100%',
85 height: '100%',
86 token:option.token||''
87 }
88
89 // eslint-disable-next-line no-undef,no-unused-vars
90 this.docEditor = new DocsAPI.DocEditor('vabOnlyOffice', config)
91
92 },
93 getFileType(fileType) {
94 let docType = ''
95 let fileTypesDoc = [
96 'doc', 'docm', 'docx', 'dot', 'dotm', 'dotx', 'epub', 'fodt', 'htm', 'html', 'mht', 'odt', 'ott', 'pdf', 'rtf', 'txt', 'djvu', 'xps',
97 ]
98 let fileTypesCsv = [
99 'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx',
100 ]
101 let fileTypesPPt = [
102 'fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx',
103 ]
104 if (fileTypesDoc.includes(fileType)) {
105 docType = 'text'
106 }
107 if (fileTypesCsv.includes(fileType)) {
108 docType = 'spreadsheet'
109 }
110 if (fileTypesPPt.includes(fileType)) {
111 docType = 'presentation'
112 }
113 return docType
114 }
115 },
116 }
117</script>
- 在要使用onlyOffice的页面要做的事：
- 导入并注册刚刚写好的组件
- 用标签的形式使用组件
- 写一个触发打开onlyOffice的事件
- 事件里面放打开文件需要的配置，例如文件路径，支持的格式等…
（文件不用上传到服务器，我是放到本地的，文件路径写本地的就好，避免文件泄露）
下面是使用onlyOffice页面的完整代码（可直接复制，改一下组件名和文件路径this.option.url的值即可使用）
1<template>
2 <div id="app">
3 <div class='qualityManual-container'>
4 <div>
5 /*写一个触发打开onlyOffice的事件*/
6 <button style='width: 120px;' type='primary' @click='getFile'>测试预览onlyOffice文档</button>
7 <button style='width: 120px;' type='primary' @click='close'>关闭</button>
8 </div>
9 <div v-if='show' class='qualityManual-container-office'>
10 /*用标签的形式使用组件*/
11 <vab-only-office :option='option' />
12 </div>
13 </div>
14 </div>
15</template>
16
17<script>
18import vabOnlyOffice from './components/组件名' //导入刚刚写好的组件
19
20export default {
21 name: 'App',
22 components: {
23 vabOnlyOffice //注册导入的组件
24 },
25 data() {
26 return {
27 //参考vabOnlyOffice组件参数配置
28 option: {
29 url: '',
30 isEdit: '',
31 fileType: '',
32 title: '',
33 lang: '',
34 isPrint: '',
35 user: { id:null,name:''}
36 },
37 show: false,
38 }
39 },
40 methods: {
41 //事件里面放打开文件需要的配置，例如文件路径，支持的格式等...
42 getFile() {
43 this.show = true
44 // getAction('/file/selectById', { id: this.id }).then(res => {
45 this.option.isEdit = false
46 this.option.lang = 'zh-CN'
47 this.option.url = '你的文件路径'
48 this.option.title = '这是个文档标题而已'
49 this.option.fileType = 'pptx'
50 this.option.isPrint = false
51 this.option.user= { id:12,name:'张三'}
52 // })
53 },
54 close() {
55 this.show = false
56 },
57 },
58}
59</script>
60
61<style>
62html,body{
63 height:100%;
64}
65#app {
66 font-family: Avenir, Helvetica, Arial, sans-serif;
67 -webkit-font-smoothing: antialiased;
68 -moz-osx-font-smoothing: grayscale;
69 text-align: center;
70 color: #2c3e50;
71 height:100%;
72
73}
74.qualityManual-container {
75 padding: 0 !important;
76 height:100%;
77 }
78 .qualityManual-container-office {
79 width: 100%;
80 height: calc(100% - 55px);
81 }
82</style>
83
看效果
点击测试预览office文档打开ppt预览 点击关闭就隐藏
加载成功后的ppt，可以预览，播放幻灯片，编辑等...
如果有写的不明白的地方：请看官网实现onlyoffice官网
功能完成，可以摸鱼咯~~~
个人笔记记录 2021 ~ 2025