SpringBoot集成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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
oo:
  secret: mnu8wQaoxveEtDY6        #onlyoffice服务 开启了jwt校验 填写
  timeout: 300000
  doc-service: http://172.31.240.1:8886 #onlyoffice服务的地址
  call-back-url: /onlyOffice/save  # oo回调
  download-file: http://172.31.240.1:9090/download/ #http://ip:prot(域名)/xxxx/download/{id}，{id}在程序中动态拼接上的
  localhost-address: http://172.31.240.1:9090 #本应用的地址
  hist-num:  #历史文件数量超出 则进行删除 有需要则填写
  max-size:  #单位 MB 限制单个文件打开时的大小 默认20MB
  cache:  #不写默认使用内部缓存 可填redis
  # ===========================================以下配置不是必须有的=====================================================
  document:
    permissions:    #https://api.onlyoffice.com/editors/config/document/permissions  在查看和编辑时可以定义不同的功能
      edit:
        chat: false       #定义是否在文档中启用聊天功能。 如果聊天权限设置为true，将显示聊天菜单按钮。 默认值为true。
        comment:     #定义文档是否可以被注释。默认为true
        copy:        #定义是否可以将内容复制到剪贴板。
        deleteCommentAuthorOnly: #定义用户是否只能删除其注释。 默认值为false。
        download:         #是否允许下载 默认为true
        editCommentAuthorOnly: #定义用户是否只能编辑其注释。 默认值为false。
        fillForms:        #是否可以填写表单 默认true
        modifyContentControl: # 定义是否可以更改内容控件设置。 仅当mode参数设置为编辑时，内容控件修改才可用于文档编辑器。 默认值为true。
        modifyFilter:           #定义筛选器是可以全局应用（true）影响所有其他用户，还是本地应用（false），即仅适用于当前用户。默认值为true。
        print:               #定义文档是否可以打印。 如果打印权限设置为“false”打印菜单选项将不在“文件”菜单中。 默认值为true。
        protect:             #定义是显示工具栏上的“保护”选项卡和左侧菜单中的“保护”按钮（真）还是隐藏（假）。 默认值为true。
        review: false             #定义文档是否可以被审核。默认：true
      view:
        chat: false       #定义是否在文档中启用聊天功能。 如果聊天权限设置为true，将显示聊天菜单按钮。 默认值为true。
        comment:     #定义文档是否可以被注释。默认为true
        copy:        #定义是否可以将内容复制到剪贴板。
        deleteCommentAuthorOnly: #定义用户是否只能删除其注释。 默认值为false。
        download:         #是否允许下载 默认为true
        editCommentAuthorOnly: #定义用户是否只能编辑其注释。 默认值为false。
        fillForms:        #是否可以填写表单 默认true
        modifyContentControl: # 定义是否可以更改内容控件设置。 仅当mode参数设置为编辑时，内容控件修改才可用于文档编辑器。 默认值为true。
        modifyFilter:           #定义筛选器是可以全局应用（true）影响所有其他用户，还是本地应用（false），即仅适用于当前用户。默认值为true。
        print:               #定义文档是否可以打印。 如果打印权限设置为“false”打印菜单选项将不在“文件”菜单中。 默认值为true。
        protect:             #定义是显示工具栏上的“保护”选项卡和左侧菜单中的“保护”按钮（真）还是隐藏（假）。 默认值为true。
        review:  false            #定义文档是否可以被审核。默认：true
  editor:
    customization:      #https://api.onlyoffice.com/editors/config/editor/customization
      anonymous:  #添加对匿名名称的请求
        request: false #定义请求是否发送。 默认值为 true
        label:    #添加到用户名的后缀。默认值为 Guest
      goback:     #定义“打开文件位置”菜单按钮和右上角按钮的设置。
        blank: false   #在新的浏览器选项卡/窗口中打开网站（如果值设置为true）或当前选项卡（如果值设置为false） 默认值为 true
        requestClose:  #定义如果单击“打开文件位置”按钮，则会调用 events.onRequestClose事件，而不是打开浏览器选项卡或窗口。默认值 false
        text:          #提示信息 默认 转到文档
        url:           #单击“打开文件位置”菜单按钮时将打开的网站地址的绝对URL
      logo:        #onlyoffice付费用户生效
        image:       #图像文件的路径
        imageDark:   #深色主题的图像文件的路径
        url:         #点击徽标图像时将使用的绝对URL
      review:
        hideReviewDisplay:     #定义在“协作”选项卡上显示还是隐藏“显示模式”按钮。 默认值为false
        hoverMode:             #定义审阅显示模式：通过悬停更改在工具提示中显示审阅 （true） 或通过单击更改（假）在气球中。 默认值为false。
      feedback:             #定义“反馈和支持”菜单按钮的设置。默认值为 true
        visible: false
        url:
      autosave:         #定义是否启用或禁用“自动保存”菜单选项。默认值为true 如果设置为false，则只能选择Strict协同编辑模式，因为Fast在没有自动保存的情况下无法工作。默认值为true
      forcesave:          #在文档编辑服务中保存文档时（例如，单击“保存”按钮等）， 将文件强制保存的请求添加到回调处理程序中。 默认值为false
      comments: false        #定义是显示还是隐藏“注释”菜单按钮。如果您隐藏了“评论”按钮，则相应的评论功能将仅供查看，添加和编辑评论将不可用。 默认值为true。
      compactHeader:    # 定义其他操作按钮是显示在编辑器窗口标题的上部徽标旁边 （false） 还是显示在工具栏 （true） 中，从而使标题更紧凑。 默认值为false。
      compactToolbar:   # 定义显示的顶部工具栏类型是完整 （假） 还是紧凑 （真）。 默认值为false。
      compatibleFeatures:  #定义仅与 OOXML 格式兼容的功能的使用。 例如，不要对整个文档使用注释。 默认值为false。
      features:             #拼写检查 - 定义在加载编辑器时是自动打开还是关闭拼写检查器。 如果此参数是布尔值，则将其设置为初始拼写检查器值，并且不会隐藏拼写检查器设置。默认值为 true
      help: false               #定义是显示还是隐藏“帮助”菜单按钮。 默认值为true。
      hideNotes: true          #定义在首次加载时是显示还是隐藏注释面板。 默认值为false
      hideRightMenu: true      #定义首次加载时是显示还是隐藏右侧菜单。 默认值为false。
      hideRulers:          # 定义是显示还是隐藏编辑器标尺。 此参数可用于文档和演示文稿编辑器。文档编辑器的默认值为false，演示文稿的默认值为true。
      macros: false             #定义在编辑器打开时是否自动运行文档宏。 默认值为true。false值对用户隐藏宏设置。
      macrosMode:          #宏提示 warn 默认  警告宏并请求运行它们的权限 / enable 自动运行所有宏/ disable不运行宏
      mentionShare:        #定义在注释中提及后描述事件的提示。true，则提示指示用户将收到通知并访问文档。 false，则提示指示用户将仅收到提及通知。 默认值为true。只有在设置了onRequestSendNotify事件的情况下，它才可用于注释。
      plugins:             #定义插件是否启动并可用。 默认值为true。
      toolbarHideFileName:  #定义文档标题是在顶部工具栏上可见 （假） 还是隐藏 （真）。 默认值为false。
      toolbarNoTabs:         #定义顶部工具栏选项卡是清晰显示 （false） 还是仅突出显示以查看选择了哪个选项卡 （true）。 默认值为false。
      uiTheme:               #定义编辑器主题设置。 theme-light, theme-classic-light, theme-dark, theme-contrast-dark 默认 theme-dark
      unit:                  #定义标尺和对话框中使用的度量单位。 可以采用以下值：cm - 厘米 /pt - 像素点/inch - 英寸. 默认值为厘米 （cm）。
      zoom:                 # 定义以百分比度量的文档显示缩放值。 可以采用大于0 的值。默认值为100。对于文本文档和演示文稿，可以将此参数设置为 -1（使文档适合页面选项）或 to-2（使文档页面宽度适合编辑器页面）。
    plugins:            #https://api.onlyoffice.com/editors/config/editor/plugins 插件配置
      autostart:        #数组  asc.{FFE1F462-1EA2-4391-990D-4CC84940B754}
        -
      pluginsData:      #数组
        -

  convert:  #https://api.onlyoffice.com/editors/conversionapi
    async:  #定义转换请求类型：异步或非异步。默认值为false。
    codePage:  #定义从csv或txt格式转换时的文件编码。
    delimiter:  #定义从csv格式转换时用于分隔值的分隔符。
    region:     #地区 oo默认值为en-US 项目中默认值zh-CN
    documentLayout:
      drawPlaceHolders:
      drawFormHighlight:
      isPrint:
    documentRenderer:
      textAssociation:
    spreadsheetLayout:
      fitToHeight:         #设置转换区域的高度（以页数为单位）。 默认值为0。
      fitToWidth:          #设置转换区域的宽度（以页数为单位）。 默认值为0
      gridLines:           #允许是否在输出PDF文件中包含网格线。 默认值为false。
      headings:            #允许是否包含输出PDF文件的标题。 默认值为false。
      ignorePrintArea:     #确定是否忽略为电子表格文件选择的打印区域。 默认值为true。
      orientation:         #设置输出 PDF 文件的方向。 可能是landscape, portrait.  默认值为纵向(portrait)
      scale:
      margins: #设置输出 PDF 文件的边距 默认 19.1mm 默认 17.8mm 默认 17.8mm   默认 19.1mm
        bottom:
        left:
        right:
        top:
      pageSize: #设置输出 PDF 文件的页面高度。默认 297mm 页面宽度。默认 210mm
        height:
        width:
    thumbnail:  # 缩略图 定义将图像格式（bmp，gif，jpg，png）指定为输出类型时缩略图的设置。
      aspect:   #默认值为2。
      first:    #默认值为true，
      height:   #缩略图高度（以像素为单位）。 默认值为100。
      width:    #缩略图宽度（以像素为单位）。 默认值为100。

核心接口

以下所有的方法都在OnlyServiceAPI类中。

openDocument()

打开文件时，请求接口地址。

  1. 用户使用文档管理器（在其浏览器中找到）打开文档以供查看或编辑。
  2. 浏览器文档管理器从文档存储服务接收用户可用的所有文档的列表。
  3. 文档标识符及其在文档存储服务中的链接使用JavaScript API发送到文档编辑器。
  4. 该文档编辑器构成的一个请求文档编辑服务的打开文档。在文档编辑器使用文档标识符和从所接收的它的链路文档管理器（步骤2）。
  5. 该文档编辑服务下载从文档文件的文件存储服务使用提供的ID和链接。在此步骤中，还为文档编辑器执行文件到Office Open XML格式的转换，以获得更好的性能和格式兼容性。
  6. 准备好后，文档编辑服务将文档文件传输到基于浏览器的文档编辑器。
  7. 文档编辑器显示文档文件和/或(如果提供了适当的权限)允许其编辑。

7698901-7505e09791bc3e53.webp

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
//打开文件时请求接口返回配置信息
@RequestMapping("/onlyOffice/{mode}/{id}")
public ModelAndView openDocument(@PathVariable String mode,@PathVariable String id, Model model) {
    log.info("only office key:" + id);
    OnFile onFile = onFileService.getById(id);


    /**
     * 必要步骤 把用户信息传入
     */
    FileUser user = new FileUser();
    user.setId(TempUser.getUserId());
    user.setName(TempUser.getUserName());
    SecurityUtils.setUserSession(user);
    /**
     * 必要步骤 文件信息传入
     */
    Map<String,Object> map = new HashMap<>();
    map.put("fileId",onFile.getFileId());
    map.put("fileName",onFile.getFileName());
    map.put("fileType",onFile.getFileType());
    map.put("fileSize",onFile.getFileSize());
    map.put("version",onFile.getVersion());

    //返回配置
    Map config = onlyServiceAPI.openDocument(map, mode, false);

    //删除用户信息
    SecurityUtils.removeUserSession();

    String s = JSON.toJSONString(config);
    log.info("only office config:" + s);
    model.addAllAttributes(config);
    return new ModelAndView("onlyOffice");
}

接口返回配置信息，页面通过onlyoffice提供的API渲染编辑器。 new DocsAPI.DocEditor(#xx,config );

返回信息中的docServiceApiUrl 是onlyoffice的API地址

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
{
"editorConfig": {
    "mode": "edit",
    "customization": {
        "feedback": {
            "visible": false
        },
        "help": false,
        "goback": {
            "blank": false
        },
        "macros": false,
        "autosave": false,
        "comments": false,
        "review": {},
        "hideRightMenu": true,
        "anonymous": {
            "request": false
        },
        "forcesave": true,
        "logo": {},
        "hideNotes": true
    },
    "plugins": {
        "pluginsData": [],
        "autostart": []
    },
    "callbackUrl": "http://172.31.240.1:9090/onlyOffice/save",
    "lang": "zh-CN",
    "user": {
        "name": "TongHuic7bba5",
        "id": "c7bba5"
    }
  },
"docServiceApiUrl": "http://172.31.240.1:8886/web-apps/apps/api/documents/api.js",
"documentType": "word",
"document": {
    "permissions": {
        "edit": true,
        "chat": false,
        "review": false
    },
    "title": "fdfs.docx",
    "fileType": "docx",
    "key": "63f560ec03a94654b10cd4fdeebec05a",
    "url": "http://172.31.240.1:9090/download/09cee8767dd3476280fa865bacfaf213",
    "info": {
        "sharingSettings": [{
            "isLink": true,
            "permissions": ["Full Access"],
            "user": "TongHuic7bba5"
        }],
        "created": "2023-08-05 21:38:25"
    }
},
"type": "desktop",
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlZGl0b3JDb25maWciOnsiY2FsbGJhY2tVcmwiOiJodHRwOi8vMTcyLjMxLjI0MC4xOjkwOTAvb25seU9mZmljZS9zYXZlIiwibGFuZyI6InpoLUNOIiwibW9kZSI6ImVkaXQiLCJ1c2VyIjp7ImlkIjoiYzdiYmE1IiwibmFtZSI6IlRvbmdIdWljN2JiYTUifSwiY3VzdG9taXphdGlvbiI6eyJhbm9ueW1vdXMiOnsicmVxdWVzdCI6ZmFsc2V9LCJhdXRvc2F2ZSI6ZmFsc2UsImNvbW1lbnRzIjpmYWxzZSwiZmVlZGJhY2siOnsidmlzaWJsZSI6ZmFsc2V9LCJmb3JjZXNhdmUiOnRydWUsImdvYmFjayI6eyJibGFuayI6ZmFsc2V9LCJoZWxwIjpmYWxzZSwiaGlkZU5vdGVzIjp0cnVlLCJoaWRlUmlnaHRNZW51Ijp0cnVlLCJsb2dvIjp7fSwibWFjcm9zIjpmYWxzZSwicmV2aWV3Ijp7fX0sInBsdWdpbnMiOnt9fSwiZG9jdW1lbnRUeXBlIjoid29yZCIsImRvY3VtZW50Ijp7ImZpbGVUeXBlIjoiZG9jeCIsInRpdGxlIjoiZmRmcy5kb2N4IiwidXJsIjoiaHR0cDovLzE3Mi4zMS4yNDAuMTo5MDkwL2Rvd25sb2FkLzA5Y2VlODc2N2RkMzQ3NjI4MGZhODY1YmFjZmFmMjEzIiwia2V5IjoiNjNmNTYwZWMwM2E5NDY1NGIxMGNkNGZkZWViZWMwNWEiLCJpbmZvIjp7ImNyZWF0ZWQiOiIyMDIzLTA4LTA1IDIxOjM4OjI1Iiwic2hhcmluZ1NldHRpbmdzIjpbeyJpc0xpbmsiOnRydWUsInBlcm1pc3Npb25zIjpbIkZ1bGwgQWNjZXNzIl0sInVzZXIiOiJUb25nSHVpYzdiYmE1In1dfSwicGVybWlzc2lvbnMiOnsiY2hhdCI6ZmFsc2UsImVkaXQiOnRydWUsInJldmlldyI6ZmFsc2V9fSwidHlwZSI6ImRlc2t0b3AifQ.HA6qS3P-czSDuScxH55tq5Bep1aN72N_F5YbXlNgJ3M"
}

handlerStatus()

保存文件过程中，在回调接口中 执行此方法。
  1. 用户在文档编辑器中编辑文档。
  2. 该文档编辑器将更改到文档编辑服务。
  3. 用户保存文档。
  4. 文档编辑服务使用JavaScript API的callbackUrl通知文件存储服务文档编辑已经结束，并返回到修改后的文档的链接。
  5. 文件存储服务从文档编辑服务下载包含所有保存的更改的文档文件，并将其存储。

7698901-4c9a110c36f1c49d.webp

参考项目中的：

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
88
89
90
91
92
93

@RequestMapping("/onlyOffice/save")
public void saveFile(HttpServletRequest request, HttpServletResponse response) {
    PrintWriter writer = null;
    try {
        writer = response.getWriter();
        // 获取传输的json数据
        Scanner scanner = new Scanner(request.getInputStream()).useDelimiter("\\A");
        String body = scanner.hasNext() ? scanner.next() : "";
        JSONObject jsonObject = JSONObject.parseObject(body);
        log.info("{}", jsonObject);

        fileService.documentSave(jsonObject);
    } catch (Exception e) {
        e.printStackTrace();
        writer.write("{\"error\":-1}");
        return;
    }
    /*
     * status = 1，我们给onlyOffice的服务返回{"error":"0"}的信息。
     * 这样onlyOffice会认为回调接口是没问题的，这样就可以在线编辑文档了，否则的话会弹出窗口说明
     */
    if (Objects.nonNull(writer)) {
        writer.write("{\"error\":0}");
    }
}

@Transactional(rollbackFor = Exception.class)
public void documentSave(JSONObject jsonObject) {
    String key = "";
    try {
        int status = jsonObject.getIntValue("status");
        log.info("status[{}]", status);
        if (6 == status) {
            log.info("开始保存文件");

            JSONArray jsonArray = jsonObject.getJSONObject("history").getJSONArray("changes");
            JSONObject object = jsonArray.getJSONObject(0);
            String userId = object.getJSONObject("user").getString("id");
            FileUser fileUser = new FileUser();
            fileUser.setId(userId);
            SecurityUtils.setUserSession(fileUser);

            key = jsonObject.getString("key");

            //文件id
            String id = onlyServiceAPI.getFileId(key);


            //判断是否是最后一人进行保存
            int users = onlyServiceAPI.getUserNum(key);
            if (users > 1) {
                return;
            }

            //历史版本最大个数 获取当前文件的历史版本数量
            Integer histNum = onlyServiceAPI.getHistNum();
            /**
             * 如果有需要保存历史记录 可以进行相关操作
             */
            if (null != histNum){
                ....
            }

            //处理文件的保存
            onlyServiceAPI.handlerStatus(jsonObject);


            log.info("保存文件结束");
            SecurityUtils.removeUserSession();
        } else if (0 == status || 2 == status || 4 == status) {
            onlyServiceAPI.close(jsonObject);
        } else if (3 == status || 7 == status) {
            //保存文档错误
            onlyServiceAPI.close(jsonObject);
        } else if (1 == status) {
            //文件服务的回调  获取key判断当前文档有多少人在这使用
            List<Map> actions = JSONObject.parseArray(jsonObject.getString("actions"), Map.class);
            if ((Integer) actions.get(0).get("type") == 1) {
                log.info("当前用户有[{}]", jsonObject.getString("users"));
                List<String> users = JSONObject.parseArray(jsonObject.getString("users"), String.class);
                onlyServiceAPI.iskey(jsonObject.getString("key"), users.size());
            }
            if ((Integer) actions.get(0).get("type") == 0) {
                onlyServiceAPI.iskey(jsonObject.getString("key"), null);
            }
        }
    } catch (Exception e) {
        e.printStackTrace();
        throw new RuntimeException(e);
    }
}

save()

外部触发保存操作。 autosave / forcesave 这俩个参数为默认值有效 。修改文件后，不执行回调方法。在点击保存后执行回调

点击按钮触发保存动作。
点击按钮触发保存动作。

converted()

文件转换:

64f32a0df0795.webp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@RequestMapping("/converted")
  public void converted(String id, String suffix,HttpServletResponse response) {
      try {
          OnFile onFile = onFileService.getById(id);
          String title = onFile.getFileName().replace(onFile.getFileType(),suffix);
          // 文件类型，文件id，输出文件类型，输出文件名称
          String path = onlyServiceAPI.converted(onFile.getFileType(),onFile.getFileId(),suffix,title,null);

          FileUtil.downloadAttachment(path,title,response);

      } catch (Exception e) {
          e.printStackTrace();
      }
  }

必须实现的接口类 SaveFileProcessor

参考：demo.service.DemoService

这个接口的实现类，会在保存回调时调用。它会把一开始的文件信息返回及文件 btye[]
这个接口一共有 3 个方法：
saveBeforeInitialization ：保存前
save ： 保存
saveAfterInitialization ： 保存后
也可以只使用 save 方法。

自定义接口 (oo服务回调使用)

  1. 保存接口

    参考：demo/controller/IndexController.saveFile()
    对应配置文件参数：oo.call-back-url
    打开时访问一次
    如果有保存动作，访问一次
    关闭时访问一次

  2. 下载文件地址

    参考：demo/controller/IndexController.download()
    对应配置文件参数：oo.download-file
    打开文件后oo服务要下载对应的文件

前端集成

HTML

参考 onlyOffice.html

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
<!-- 加载 onlyOffice api , docServiceApiUrl 是返回配置中的一个参数 -->
<script type="text/javascript" th:src="${docServiceApiUrl}"></script>
<script type="text/javascript" language="javascript" th:inline="javascript">
    let documentChangeFlag = false;
    let docEditor;
    let histArray = [[${history}]];
    let id = [[${id}]] ;
    let fileExt = '[[${document.fileType}]]' ;

    const connectEditor = function () {
        let config = {
            width: "100%",
            height: "100%",
            type: [[${type}]],
            token: [[${token}]],
            documentType: [[${documentType}]],
            document: [[${document}]],
            editorConfig: [[${editorConfig}]],
            // https://api.onlyoffice.com/editors/config/events
            events: {}
        }
        // 配置信息
        docEditor = new DocsAPI.DocEditor("iFrameEditor",config );
    };

    if (window.addEventListener) {
        window.addEventListener("load", connectEditor);
    } else if (window.attachEvent) {
        window.attachEvent("load", connectEditor);
    }

    $(function () {

    })
</script>
VUE

参考 onlyOffice.vue

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

/**
 * 初始化文件页面信息
 */
init() {
  let params = this.$route.query.params;
  this.id = params.id;
  this.judgePlatform();
  openDocument(this.id, { mode: 'edit', c: 1 }).then(res => {
    <!--  返回配置信息  -->
    if (res.code === 200) {
      this.docServiceApiUrl = res.result.docServiceApiUrl;
      this.token = res.result.token;
      this.documentType = res.result.documentType;
      this.document = res.result.document;
      this.editorConfig = res.result.editorConfig;
      this.fileExt = res.result.document.fileType;
      this.fileName = this.document.title;

      let script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = this.docServiceApiUrl;
      <!--   加载 onlyoffice api       -->
      document.getElementsByTagName('head')[0].appendChild(script);
      this.setEditor()
    } else {
      this.$messagePrompt('error', res.message)
    }
  })
},
async setEditor() {
    let config = {
        width: '100%',
        height: '100%',
        type: this.platform,
        token: this.token,
        documentType: this.documentType,
        document: this.document,
        editorConfig: this.editorConfig,
        events: {
            "onAppReady": this.onReady,//-将应用程序加载到浏览器时调用的函数。
            "onDocumentStateChange": this.onDocumentStateChange,//文档改变后的回调
            "onError": this.onError,//发生错误或其他一些特定事件。
            "onOutdatedVersion": this.onOutdatedVersion,
            // "onRequestSaveAs": this.onRequestSaveAs,
            "onRequestClose": this.onRequestClose,//当必须结束编辑器的工作并且必须关闭编辑器时调用的函数。
            // "onDownloadAs": this.onDownloadAs
        }
    }
    //console.log(`setEditor ==> config:`, config)
    if (this.docEditor.length > 0) {
        this.docEditor.destroyEditor();
    }
    let that = this
    this.$nextTick(() => {
    setTimeout(function () {
        that.docEditor = new DocsAPI.DocEditor('editorDiv', config)
        }, 1500);
    })
},

Demo的运行结果

编辑文件



查看文件



格式转换