OnlyOffice 结合 Vue

admin管理员组

文章数量:1644570

1.官网资料

官网中文地址
官网api地址

2.Docker部署OnlyOffice

下载docker, 不会用docker请自行查资料

1. 拉去镜像

   docker pull onlyoffice/documentserver
   

2. 启动容器

   # 8085 端口映射 到 容器的 80端口
   # 指定文件代理映射路径
   docker run -i -t -d -p 8085:80 --restart=always 
   	-v /app/onlyoffice/DocumentServer/logs:/var/log/onlyoffice  
   	-v /app/onlyoffice/DocumentServer/data:/var/www/onlyoffice/Data  
   	-v /app/onlyoffice/DocumentServer/lib:/var/lib/onlyoffice 
   	-v /app/onlyoffice/DocumentServer/db:/var/lib/postgresql  onlyoffice/documentserver
   	
   

3. 启动容器后, 稍等片刻访问,会成功会出现以下页面.

3. index.html

在vue的项目index.html引入对应服务的js, 服务器ip不要用127.0.0.1 跟 localhost

<script type="text/javascript" src="http://docker服务器ip:docker服务器端口/web-apps/apps/api/documents/api.js"></script>

4.demo.vue

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

<script>

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

      let height = document.body.clientHeight - 50 + 'px';
      let config = {
        "document": {
          "fileType": "docx",
          //主键,onlyOffice会做缓存
          "key": "1",
          "title": "我1的测试文档.docx",
          # 文档地址url
          "url": "http://127.0.0.1:9020/1.doc"
        },
        "documentType": "word",
        "height": height,
        "editorConfig": {
          "lang": "zh-CN",
          # 自己后台回调的接口地址  不要使用 127.0.0.1 或 localhost
          "callbackUrl": "http://192.168.1.222:8088/api/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 DocsAPI.DocEditor("placeholder", 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) {
        let fileType = event.data.fileType;
        let title = event.data.title;
        let url = event.data.url;
        console.log(fileType);
        console.log(title);
        console.log(url);
      },
      //下载另存为
      onDownloadAs(event) {
        let fileType = event.data.fileType;
        let url = event.data.url;
        console.log("ONLYOFFICE Document Editor create file: " + url);
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>

5.后端Controller回调函数

/**
 * OnlyOffice-Controller
 */
@RequestMapping("/api/onlyOffice")
@RestController
@Slf4j
public class OnlyOfficeController {

    @PostMapping("/save/{fileId}")
    public ResponseEntity<Map> 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 = MapUtil.getInteger(param, "status", -1);
        if (status == 2) {
            //当前在操作用户id
            List<Long> usersId = MapUtil.getValueAsList(param, "users");
            log.info("method[save] usersId:{}", usersId.toString());
        }
        if (status == 6) {
            //TODO 可以利用websocket 推送到页面 产生提示语  
            
            log.info("method[save] 正在编辑文档，但保存了当前文档状态. url:{}", MapUtil.getString(param, "url"));
            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);
    }

}

本文标签： ONLYOFFICEvue