文曲Office

Appearance

快速开始 ​

前提条件 ​

  • 已正确安装 WebOffice 并进行授权，在 portal 系统可以新建文档并开档。
  • 已按照要求实现回调服务的相关接口。

下面将通过 3 个步骤介绍如何快速使用 JSSDK。

下载 ​

我们为您提供了多个版本的 JSSDK，建议下载最新版本，以使用我们开发的新功能，下载地址：JSSDK。

资源引用 ​

JSSDK 提供的代码包支持非模块化以及 ES6 模块化方式引用。

JSSDK 不包含 Promise Polyfill，所以需要兼容低版本浏览器（例如 IE11）的时候，记得在 JSSDK 引入之前先引入 Promise Polyfill

非模块化

html
<script src="./wenqu-office-jssdk.js"></script>

模块化

js
import WebOfficeSdk from "./wenqu-office-jssdk.js";

下面以非模块化方式引用为例，讲解 JSSDK 的快速上手。

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>WebOffice</title>
  </head>
  <body>
    <script src="./wenqu-office-jssdk.js"></script>
    <script>
      console.log("引入后可以开始使用 jssdk 了！");
      console.log(WebOfficeSdk);
    </script>
  </body>
</html>

初始化 ​

引用之后，就可以通过初始化配置，让 JSSDK 在配置的挂载节点下创建一个 iframe，并自动初始化相关数据和事件。

IMPORTANT

请在 DOMContentLoaded 事件被触发后，确保挂载节点存在，再执行初始化操作。

js
window.onload = function () {
  const jssdk = WebOfficeSDK.init({
    url: "http://your-document-edit-url", // 在线文档的编辑地址，从服务端获取
    container: document.querySelector("#outer"), // 用于承载weboffice的容器
    auth: true, // 是否要求鉴权，此处的配置需要和 WebOffice 服务端要求一致，一般来说都是为 true
  });

  // auth 为 true 的情况下必须要调用 setToken 方法设置 token
  jssdk.setToken({
    token: "yourToken",
    timeout: 10 * 60 * 1000, // 过期时间，毫秒
  });

  jssdk.ready().then(() => {
    console.log("jssdk ready", jssdk);
    // 此时可以调用 jssdk 提供的高级 api 进行业务开发
    console.log("FileInfo", jssdk.Application.ActiveDocument.FileInfo);
  });
};

Copyright © 2024 文曲Office