Blog of LCX

0%

OnlyOffice

发表于 分类于 ， Valine：

前端集成 OnlyOffice

1. 安装依赖

安装 OnlyOffice 的 Vue 插件：

1
npm install --save @onlyoffice/document-editor-vue
2. 创建 Vue 组件

创建一个 Vue 组件封装 OnlyOffice 编辑器，配置路由。

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
<template>
	<div class="report-onlyoffice">
		<div id="placeholder"></div>
	</div>
</template>

<script>
import {
	editOfficeFile
} from '_r/onlyoffice.js'

export default {
	name: 'OnlyOffice',
	......
	mounted() {
		this.$nextTick(() => {
			switch (this.fileInfo.operations) {
                ....
				// 编辑
				case 'edit':
					this.editDoc()
					break
                ....
			}
		})
	},
	destroyed() {
		this.docEditor.destroyEditor()
	},
	methods: {
		/**
		 * 初始化文档编辑器
		 * @param {string} docserviceApiUrl 文档服务API url
		 * @param {object} config 文件相关配置信息
		 */
		initDocEditor(docserviceApiUrl, config) {
			this.loadOnlyOfficeAPI(docserviceApiUrl).then(() => {
				/* global DocsAPI */
				this.docEditor = new DocsAPI.DocEditor('placeholder', {
					...config,
					editorConfig: {
						...config.editorConfig,
						lang: 'zh', //  语言设置为中文
						customization: {
							...config.editorConfig.customization,
							zoom: 100 //  缩放比例为 100
						}
					}
				})
			})
		},
		editDoc() {
			let data = {
				userFileId: this.fileInfo.userFileId,
				previewUrl: this.fileInfo.fileUrl
			}
			editOfficeFile(data).then((res) => {
				if (res.code === 200) {
					// let config = {
					// 	...res.data.file,
					// 	type: this.platform
					// }
					this.initDocEditor(res.data.docserviceApiUrl, res.data.file)
				}
			})
		},
		/**
		 * 加载 onlyoffice api
		 * @return {Promise} 返回 api 加载状态
		 */
		loadOnlyOfficeAPI(src) {
			return new Promise((resolve, reject) => {
				const script = document.createElement('script')
				script.type = 'text/javascript'
				script.src = src
				document.body.appendChild(script)
				script.onload = () => {
					resolve()
				}
				script.onerror = () => {
					reject()
				}
			})
		}
	}
}
</script>
3. 使用组件

使用文档编辑功能的调用在新窗口编辑：

1
2
3
4
5
6
7
8
9
10
11
12
getFileOnlineEditPathByOffice(row) {
	let userFileId = row.userFileId

	const { href } = router.resolve({
		name: 'Onlyoffice',
		query: {
			userFileId: userFileId,
			operations: 'edit'
		}
	})
	window.open(href, '_blank')
},

后端配置

1. 配置 OnlyOffice 服务器
  1. 安装 OnlyOffice：根据官方文档在服务器上安装 OnlyOffice Document Server。
  2. 检查服务：通过浏览器访问 http://<your_server_ip>:port，确保服务正常运行。（默认安装在80端口，可以改到其他端口）
2. 前端请求controller，controller返回处理后的信息给前端，前端再请求onlyoffice服务

创建一个控制器 DocumentController，用于处理文档的加载和保存请求：

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
@RestController
@RequestMapping("/documents")
public class DocumentController {
    ......

    @Operation(summary = "编辑office文件", description = "编辑office文件", tags = {"office"})
    @ResponseBody
    @RequestMapping(value = "/editofficefile", method = RequestMethod.POST)
    public RestResult<Object> editOfficeFile(HttpServletRequest request, @RequestBody EditOfficeFileDTO editOfficeFileDTO) {
        ......
        // 记录前端请求，返回给前端使其再请求onlyoffice服务
        try {
            ......
            设置以下参数返回给前端
              "document": {
                        "title": "%s",
                        "key": "%s",
                        "fileType":"%s",
                        "lang":"zh-CN",
                        "permissions": {
                            "comment": true,
                            "commentGroups": {
                                "edit": ["Group2", "Group1"],
                                "remove": [""],
                                "view": ""
                            },
                            "copy": true,
                            "deleteCommentAuthorOnly": false,
                            "download": true,
                            "edit": true,
                            "editCommentAuthorOnly": false,
                            "fillForms": true,
                            "modifyContentControl": true,
                            "modifyFilter": true,
                            "print": true,
                            "review": true,
                            "reviewGroups": ["Group1", "Group2", ""]
                        },
                        "url": "%s"
                    },
                "editorConfig": {
                    "customization":{
                        "autosave": true,
                        "forcesave": true
                    }
                    "lang": "zh-CN",
                    "callbackUrl": "%s",
                    "onEditing": {
                         "mode": "fast",
                         "change": true
                    },
                    "mode": "edit",
                    "user": {
                        "group": "Group1",
                        "id": "%s",
                        "name": "%s"
                    }
                }
            }
            FileModel fileModel = fileConfigurer.getFileModel(
                    DefaultFileWrapper
                            .builder()
                            .userFile(userFile)
                            .type(type)
                            .lang(locale.toLanguageTag())
                            .action(action)
                            .user(user)
                            .actionData(previewUrl)
                            .build()
            );
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("file",fileModel);
            jsonObject.put("docserviceApiUrl", docserviceSite + docserviceApiUrl);
            jsonObject.put("reportName",userFile.getFileName());
            result.setData(jsonObject);
            result.setCode(200);
            result.setMessage("编辑报告");
        } catch (Exception e) {
            log.error(e.getMessage());
            result.setCode(500);
            result.setMessage("服务器错误！");
        }
        return result;
    }
}