项目中onlyoffice的使用

1,167 阅读1分钟

我正在参加「掘金·启航计划」

什么是onlyoffice

ONLYOFFICE,简单地说,就是将 Word 、Excel、PPT 3 大办公套件搬到了云端,只需要一个浏览器即可以在线使用 Office 的各种功能。它提供商业版和社区版,社区版一般可以满足基本的需求,可以二次开发。商业版支持更多的用户同时在线编辑预览以及技术支持,根据需要增加license的数量不同价格也会不同。

官网地址: www.onlyoffice.com/zh/

API地址: api.onlyoffice.com/editors/bas…

图片3.png

市面上onlyoffice的竞品比较,选择适合项目的才是最好的

图片2.png

使用docker如何安装onlyoffice

  1. 首先要安装docker,安装完后验证一下是否安装成功 docker -v
  2. 然后下载onlyoffice 执行docker pull onlyoffice/documentserver
  3. docker images 查看一下镜像是否存在
  4. docker run -i -t -d -p 80:80 --restart=always onlyoffice/documentserver 生成docker容器
  5. docker ps 检查是否生成容器
  6. 执行curl 127.0.0.1:80/welcome 或者在浏览器中输入访问地址:IP:PORTS/welcome 检查是否可以使用

前端项目中引入onlyoffice

模板html页面中加入下面的代码 document为后台传入的参数

<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);

config变量中的配置可以在官方api文档中查到有关的资料,根据自己项目的需求进行配置即可