跳到主要内容

前置知识

业务系统使用 JS SDK 与 Filez 文档交互，有两种初始化方式：

方式一：Filez 文档由 JS SDK 来嵌入​

通过 JS SDK 的 mount 方法，自动将 Filez 文档以 iframe 形式嵌入到指定容器中。

代码示例​

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JS SDK 嵌入示例</title>
</head>
<body>
  <div class="container">
    <div id="box"></div>
  </div>
  <script src="sdk.js"></script>
  <script>
    var app;
    window.onload = async () => {
      // id 为 "box" 的 DOM，Filez 文档会以 iframe 的形式嵌入在其下
      app = await ZOfficeSDK.mount(
        "https://zofficedemo.filez.com/docs/app/local/a03a611e-03a9-4a2c-8fe4-9f885ce927ce/edit/content",
        "#box",
        true
      );
      await app.ready();
    }
  </script>
</body>
</html>

方式二：Filez 文档由业务系统初始嵌入​

业务系统先通过 iframe 嵌入文档，然后使用 JS SDK 的 connect 方法连接到已存在的 iframe。

代码示例​

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>业务系统嵌入示例</title>
</head>
<body>
  <div class="container">
    <div id="box">
      <iframe 
        src="https://zofficedemo.filez.com/docs/app/local/a03a611e-03a9-4a2c-8fe4-9f885ce927ce/edit/content" 
        frameborder="0">
      </iframe>
    </div>
  </div>
  <script src="sdk.js"></script>
  <script>
    var app;
    window.onload = async () => {
      // id 为 "box" 的 DOM，Filez 文档以 iframe 的形式嵌入在其下
      app = await ZOfficeSDK.connect("#box", true);
      await app.ready();
    }
  </script>
</body>
</html>
选择建议
  • 方式一：适合完全由 JS SDK 控制文档加载的场景
  • 方式二：适合业务系统需要自定义 iframe 属性的场景
最后于 更新