Preview and collaboratively edit a document online - Intelligent Media Management

Intelligent Media Management (IMM) allows multiple people to simultaneously preview and collaboratively edit Office documents that are stored in Alibaba Cloud Object Storage Service (OSS), from browsers on different devices. This topic describes how to preview and collaboratively edit documents online.

Usage notes

IMM allows up to 100 people to collaboratively edit a document. If more than 100 people collaborate on a document, IMM automatically switches to the document preview mode. We recommend that no more than 50 people collaboratively edit a document for optimal collaboration experience.

Procedure

To preview a document online, perform the following steps:

Create a bucket in OSS. For more information, see Create buckets.
Upload an Office document to the bucket created in Step 1. For more information, see Upload objects.
Activate IMM. For more information, see Activate IMM.
Create an IMM project. For more information, see Create a project.
Call the GenerateWebofficeToken operation to obtain an access token for online document preview. For more information, see GenerateWebofficeToken.
Important
The URL in the response to the operation cannot be directly opened in a browser.

Include the access token and the URL in an HTML page to preview the document. The following sample code provides an example on how to preview a document:

Note

For security reasons, the access token remains valid for 30 minutes. If it expires, refresh the token to continue access. For more information, see Use WebOffice.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Weboffice</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <style>
    iframe {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <script src="https://g.alicdn.com/IMM/office-js/1.1.19/aliyun-web-office-sdk.min.js"></script>
  <div id="weboffice-zone"></div>
  <script>
    window.onload = init;
    async function init() {
      // Enter the WebOffice URL and access token. 
      weboffice({
        "AccessToken": "52bbf0b2aa584a38b9a9b43cbbcd76****",
        "WebofficeURL": "https://office-cn-shanghai.imm.aliyuncs.com/office/p/e4a268d86c08b9f3748d100efb9bec2a2f2064e8?_w_tokenty****",
      })
    }
    function weboffice(tokenInfo) {
      let mount = document.getElementById('#weboffice-zone');
      let ins = aliyun.config({ mount, url: tokenInfo.WebofficeURL });
      ins.setToken({ token: tokenInfo.AccessToken });
    }
  </script>
</body>
</html>