基于Docker部署服务器环境

version: "2"
services:
  OnlyOffice:
    image: onlyoffice/documentserver:7.3.3
    restart: always
    ports:
      - 8080:80
    volumes:
      - ./data:/var/www/onlyoffice/Data

server {
    listen      80;
    listen      443 ssl;
    server_name xxx.yourservername.com;
	
    # 增加ssl
	ssl             on;
    ssl_certificate /path/to/xxx.pem;
    ssl_certificate_key /path/to/xxx.key;
    ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;
    # 指定密码为openssl支持的格式
    ssl_protocols TLSv1.2;
    # 密码加密方式
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    # 依赖SSLv3和TLSv1协议的服务器密码将优先于客户端密码
    ssl_prefer_server_ciphers on;
	
	if ($scheme = http) {
		return 301 https://$server_name$request_uri;
	}

    location / {
        proxy_pass  http://xxx:8080;
        proxy_redirect     off;
        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection upgrade;
        proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
        proxy_max_temp_file_size 0;
        proxy_connect_timeout      90;
        proxy_send_timeout         90;
        proxy_read_timeout         90;
        proxy_buffer_size          4k;
        proxy_buffers              4 32k;
        proxy_busy_buffers_size    64k;
        proxy_temp_file_write_size 64k;
    }
}

http://xxx.yourservername.com/web-apps/apps/api/documents/api.js能正常访问即可。

前端

在index.html中引入<script type="text/javascript" src="https://onlyoffice.gudu.fun/web-apps/apps/api/documents/api.js"></script>

编写Vue组件（以下为示例，可以将固定文件修改成props进行动态处理）

<template>
    <div>
        <div id="onlyoffice"></div>
    </div>
</template>

<script>
  export default {
    name: 'OnlyOffice',
    data () {
      return {
        DocEditor: null
      }
    },
    mounted () {
      if (this.DocEditor != null) {
        this.DocEditor.destroyEditor()
      }

      const height = document.body.clientHeight - 50 + 'px'
      const config = {
        document: {
          fileType: 'docx',
          // 主键,onlyOffice会做缓存
          key: '1',
          title: '我1的测试文档.docx',
          // 文档地址url
          url: 'http://192.168.230.131:9000/技术方案.docx'
        },
        documentType: 'word',
        height: height,
        editorConfig: {
          lang: 'zh-CN',
          // 自己后台回调的接口地址  不要使用 127.0.0.1 或 localhost
          callbackUrl: 'http://192.168.230.1:8080/java-test/OnlyOffice/save/' + '123',
          user: {
            id: '1',
            name: '测试人'
          },
          customization: {
            // 开启保存发送状态=6回调
            forcesave: true,
            anonymous: {
              // 当前操作用户姓名
              label: 'test2022'
            }
          }
        },
        events: {
          onDocumentStateChange: this.onDocumentStateChange,
          onRequestSaveAs: this.onRequestSaveAs,
          onDownloadAs: this.onDownloadAs
        }
      }
      this.DocEditor = new window.DocsAPI.DocEditor('onlyoffice', config)
    },
    methods: {
      // 缓存到onlyOffice数据库里面的回调
      onDocumentStateChange (event) {
        if (event.data) {
          console.log('The document changed')
          console.log(event)
          console.log(event.data)
        } else {
          console.log('Changes are collected on document editing service')
        }
      },
      // 点击保存按钮的回调
      onRequestSaveAs (event) {
        const fileType = event.data.fileType
        const title = event.data.title
        const url = event.data.url
        console.log(fileType)
        console.log(title)
        console.log(url)
      },
      // 下载另存为
      onDownloadAs (event) {
        const fileType = event.data.fileType
        const url = event.data.url
        console.log('ONLYOFFICE Document Editor create file: ' + url)
        console.log('ONLYOFFICE Document Editor create file: ' + fileType)
      }
    }
  }
</script>

<style scoped>

</style>

后端

package fun.gudu.modules.controller;

import cn.hutool.core.io.FileUtil;
import cn.hutool.core.map.MapUtil;
import cn.hutool.http.HttpUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.Map;

@Slf4j
@RestController
@RequestMapping("/OnlyOffice")
public class OnlyOfficeController {

    @PostMapping("/save/{fileId}")
    public ResponseEntity save(@RequestBody Map param, @PathVariable String fileId) {

        log.info("method[save] fileId:{}", fileId);
        //        log.info("method[save] param:{}", JsonUtils.toJson(param));
        //文档主键
        Long id = MapUtil.getLong(param, "key");
        log.info("method[save] id:{}", id);
        //操作状态 1:编辑  2:准备保存  3: 保存错误  4:文档关闭没有修改  6: 正在编辑文档，但保存了当前文档状态 7:强制保存文档时发生错误
        Integer status = (Integer) param.get("status");
        if (status == 2) {
        }
        if (status == 6) {
            String fileUrl = (String) param.get("url");
            long size = HttpUtil.downloadFile(fileUrl, FileUtil.file("D:/testDir/1.docx"));
            System.out.println("Download size: " + size);
            Map result = new HashMap(1);
            result.put("error", "0");
            result.put("msg", "操作成功");
            return ResponseEntity.ok(result);
        }
        Map result = new HashMap(1);
        result.put("error", "0");
        return ResponseEntity.ok(result);
    }
}

最终效果可见：https://vue-demo.gudu.fun/OnlyOffice (opens new window)

OnlyOffice还支持多人同时在线编辑，社区版最多支持20个人。

To Be Continued！😎