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 stored in Object Storage Service (OSS) from browsers on different devices.

Usage notes

Up to 100 people can collaboratively edit a document. If the number exceeds 100, IMM automatically switches to preview mode. For optimal performance, we recommend no more than 50 concurrent editors.

Note

If a message indicates that your domain name is not on the WebView whitelist for the mini program, contact IMM technical support through the DingTalk user group. For the group number, see Contact us. Technical support will add your domain name to the whitelist after you provide the WeChat trusted domain validation file.

Procedure

To preview a document online:

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>