【在线文档】onlyoffice 二次开发-一一网

这是我参与更文挑战的第22天，活动详情查看：更文挑战

一、前言

之前使用过 seafile + onlyoffice（在线文档+网盘），在使用过程中解决些许 seafile 的 bug，当然 seafile 代码写得也不错，当中对文件处理（存储）思想可以学习一下。

想来输出总结一下。

先以此篇为引，之后可能再分析下 onlyoffice。

ONLYOFFICE 文档生成器支持所有常见的文档格式：

对应文档：文档生成器

可打开 DOC、DOCX、ODT、RTF、TXT、XLS、XLSX、ODS、CSV、PPT、PPSX、PPS、ODP和 PPTX
并保存为 DOCX、ODT、XLSX、PPTX 或 PDF

二、功能开发

主要过程可分为三个步骤：

启动 onlyoffice 容器
开发服务对接 onlyoffice
测试

基本流程，如图：

onlyoffice-demo流程.png

（1）启动 `onlyoffice` 容器

注意点：

采用最新社区版本：onlyoffice/documentserver:5.4.2.46
将内部端口映射到宿主机：-p 8889:80

操作如下：

$ sudo docker run -d -it -p 8889:80 onlyoffice/documentserver:5.4.2.46 
a54f87f65e19cdadee628b619dcd155fcbabfd9309dc9e632f8a66f00824f347

$ sudo docker ps 
CONTAINER ID        IMAGE                                COMMAND                  CREATED             STATUS              PORTS                           NAMES
a54f87f65e19        onlyoffice/documentserver:5.4.2.46   "/bin/sh -c /app/ds/…"   44 seconds ago      Up 42 seconds       443/tcp, 0.0.0.0:8889->80/tcp   practical_faraday
复制代码

（2）开发服务对接 `onlyoffice`

主要过程，可分为三个：

打开文件：需要二次开发处理，判断对应文件是否预览/可编辑
编辑文件：交给 onlyoffice
保存文件：需要二次开发处理，提供回调接口

保存文档 API 地址：(链接)[api.onlyoffice.com/editors/sav…]

1）业务代码

后端开发框架，采用 SpringBoot。

这里举个栗子，主要步骤如下：

入口方法：处理文件参数等
用对应的模板展示
回调接口：用于文件编辑完成后保存

以下是极简代码，主要帮梳理逻辑，代码如下：

这里隐去作者认为不重要的部分，不影响阅读。

@Slf4j
@RestController
public class IndexController {
    
    @GetMapping("index")
    public ModelAndView viewFile() {
        
        // 这里设置文件属性和文件权限
        // 1. 文件属性：文件类型、文件key、文件路径等
        // 2. 文件权限：是否可下载、是否可编辑、是否可打印、是否可重看
        DocumentDTO document = generateDocumentInfo(fileDTO);
        
        // 这里设置 onlyoffice 相关属性和用户信息
        // 1. 用户信息：用户名、用户Id
        // 2. 相关属性：回调地址、编辑模式、语言（用于国际化）
        EditorConfigDTO editorConfig = generateEditorConfig(fileDTO);
        
        // 设置模板跳转页面
        ModelAndView modelAndView = new ModelAndView("/onlyoffice");
        // 设置文件属性
        modelAndView.addObject(document, document);
        // 设置可编辑配置属性
        modelAndView.addObject(editorConfig, editorConfig);
        // 设置文件类型，onlyoffice 默认只提供两种：txt 和 spreadsheet
        modelAndView.addObject(documentType, "txt");

        return modelAndView;
    }
    
    /**
     * 回调保存
     *
     * Tips: onlyoffice 回调保存文件
     *
     * @return 成功
     */
    @PostMapping("/callback")
    @ResponseBody
    public String callback() {

        log.info("callback");
        log.info("callback....." + System.currentTimeMillis());

        return "{\"error\": 0}";
    }
}
复制代码

2）模板页面

这里服务端渲染模板文件框架，采用 freemarker。

模板文件 onlyoffice.ftl，对应如下：

<!DOCTYPE html>
<html>
<head>
    <title>${document.title}</title>
    <link rel="icon" href=""/>
    <style type="text/css">
        html, body {
            padding: 0;
            margin: 0;
            height: 100%;
        }
    </style>
</head>

<body>

<div id="placeholder"></div>

<script type="text/javascript" src="${onlyoffice.url}/web-apps/apps/api/documents/api.js"></script>
<script type="text/javascript">

    var config = {
        "type": window.screen.width < 992 ? 'mobile' : 'desktop',
        "document": {
            "fileType": "${document.fileType}",
            "key": "${document.key}",
            "title": "${document.title}",
            "url": "${document.url}",
            "permissions": {
                "download": ${document.permissions.isDownload?string("true","false")},
                "edit": ${document.permissions.isEdit?string("true","false")},
                "print": ${document.permissions.isPrint?string("true","false")},
                "review": ${document.permissions.isReview?string("true","false")}
            }
        },
        "documentType": "${documentType}",

        "editorConfig": {
            "callbackUrl": "${editorConfig.callbackUrl}",
            "lang": "${editorConfig.lang}",
            "mode": "${editorConfig.mode}",
            "customization": {
                "forcesave": ${editorConfig.customization.isForceSave?string("true","false")},
            },
            "user": {
                "name": "${editorConfig.user.name}",
                "id": "${editorConfig.user.id}"
            }
        }
    };
    var docEditor = new DocsAPI.DocEditor("placeholder", config);
</script>
</body>
</html>
复制代码