onlyoffice+vue实现在线预览在线编辑
# 前言
ONLYOFFICE，是一个包含常用办公套件，Word 、Excel、PPT大办公套件搬到了云端，只需要一个浏览器即可以在线使用 Office 的各种功能。
# 搭建服务
# docker搭建
# 1.安装docker
# 2.拉取镜像
sudo docker pull onlyoffice/documentserver
1
# 3.运行镜像
创建数据目录
# 创建对应目录
mkdir logs
mkdir data
mkdir lib
mkdir db
ls
1
2
3
4
5
6
2
3
4
5
6
# 启动docker容器，默认启动端口为80，可以进行修改
docker run -i -t -d -e TZ="Asia/Shanghai" -p 6831:80 --restart=always \
-v /root/data/onlyoffice/DocumentServer/logs:/var/log/onlyoffice \
-v /root/data/onlyoffice/DocumentServer/data:/var/www/onlyoffice/Data \
-v /root/data/onlyoffice/DocumentServer/lib:/var/lib/onlyoffice \
-v /root/data/onlyoffice/DocumentServer/db:/var/lib/postgresql onlyoffice/documentserver
# 查看镜像下载
docker images
# 查看容器
docker ps
# 查看启动日志
docker logs -f 容器ID
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
访问 localhost:6831/welcome 测试是否成功
# 配置使用
# 1.预览文件
###支持的文档类型
# 5.4.2 版本
# 字符串类型，定义文档打开类型：
1、text(.doc, .docm, .docx, .dot, .dotm, .dotx, .epub, .fodt, .htm, .html, .mht, .odt, .ott, .pdf, .rtf, .txt, .djvu, .xps);
2、spreadsheet(.csv, .fods, .ods, .ots, .xls, .xlsm, .xlsx, .xlt, .xltm, .xltx);
3、presentation(.fodp, .odp, .otp, .pot, .potm, .potx, .pps, .ppsm, .ppsx, .ppt, .pptm, .pptx).
1
2
3
4
5
6
2
3
4
5
6
public/index.html引入搭好的文档解析api
<script type='text/javascript' src='http://ip:port/web-apps/apps/api/documents/api.js'></script>
1
# 2.vue组件封装
<!--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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
组件调用
<template>
<div id="app">
<div class='qualityManual-container'>
<div>
<button style='width: 120px;' type='primary' @click='getFile'>测试预览office文档</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/HelloWorld.vue'
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 = 'http://ip:port/a.xlsx'
this.option.title = '123'
this.option.fileType = 'xlsx'
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
上次更新: 2024/02/20, 17:31:36