WebOffice预览和协作编辑

智能媒体管理IMM提供文档在线预览和协作编辑功能,支持在不同的终端通过浏览器预览和多人协作编辑存储在阿里云OSS上的Office文档。本文介绍如何进行文档在线预览和协作编辑。

注意事项

文档协作编辑的人数在50人以下体验最佳,最高支持100人,超过100人会自动变为预览模式。

操作步骤

您只需要通过如下步骤就可以实现文档在线预览:

  1. 创建阿里云OSS存储空间(Bucket)。具体操作,请参见控制台创建存储空间

  2. 上传Office文档至步骤1创建的Bucket中。具体操作,请参见控制台上传文件

  3. 开通智能媒体管理IMM服务。具体操作,请参见开通产品

  4. 创建IMM项目。具体操作,请参见创建项目

  5. 调用IMM提供的接口GenerateWebofficeToken获取文档在线预览凭证。具体操作,请参见GenerateWebofficeToken - 获取Weboffice凭证

    重要

    调用该接口获取的WebofficeURL无法通过浏览器直接打开,需要执行步骤6。

  6. 将步骤5中获取的在线预览凭证嵌入HTML页面进行文档预览。示例代码如下:

    说明

    出于安全考虑,此页面仅有30分钟的有效时间,过期需要通过Token刷新机制才可继续访问。更多信息,请参见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() {
          // 填入Weboffice链接和预览凭证信息。
          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>